/*
 * Lot page (Familiar design) - ItemShow.php + cvf/ajax/item.php
 * Extracted 2026-09-14 from redesign-lot/familiar.php (the chosen redesign), theme tokens
 * (--acc / --acc-rgb / --acc-ink) injected inline by lx_tokens_css().
 */

:root{
  /* A light, faintly warm ground rather than a cool blue-grey: it takes the
     clinical edge off, makes the green read richer, and leaves the white cards
     to be carried by their shadow rather than by a hard step in tone. */
  --bg:#F7F7F5; --card:#FFFFFF; --ink:#101317; --ink-2:#3D444E; --mut:#6A7078;
  --line:#E7E7E3; --line-2:#F0F0EC; --wash:#F4F4F1;
  /* Cards are lifted rather than outlined: a hairline round everything on a grey
     page is what made this read flat. */
  --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);
  --warn-bg:#FFF8E6; --warn-ink:#8A6100; --warn-line:#F0DFB0;
  --bad-bg:#FDF0EC; --bad-ink:#A8341C;
   
  
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
body.override{background:var(--bg)}
body.override .fm{font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
:where(body.override .fm) b,:where(body.override .fm) strong{color:inherit}
body.override .fm :where(h1,h2,h3,h4,h5,h6){color:inherit!important;font-family:var(--sans);font-weight:inherit}
.fm,.fm *,.fm *::before,.fm *::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. */
.fm :where(img){max-width:100%;display:block}
.fm :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. */
.fm :where(a):hover,.fm :where(a):focus{color:inherit;text-decoration:none}
.fm-body a:hover,.fm-body a:focus,
.fm .acd-wrap a:hover,.fm .acd-wrap a:focus{text-decoration:underline}
.fm :where(input,button,select){font-family:var(--sans)}
.fm p,.fm h1,.fm h2,.fm h3,.fm h4,.fm ul,.fm ol,.fm dl{margin:0}
	
/* The bidding panel's width and the gutter beside it live here because the head
   above the columns has to know them too: the title stops where the stage does. */
/* --fm-edge is the gutter .fm-in holds the page off the screen edge by, and it
   is a token because the stage cancels it with a negative margin to go full
   bleed on a phone. Two places, one number: change it here and the bleed
   follows, instead of drifting out of step and leaving a hairline of page
   down one side. (--fm-gutter is a different thing: the gap BETWEEN the two
   columns.) */
.fm{padding-bottom:70px;--fm-panel:376px;--fm-gutter:36px;--fm-edge:24px}
/* Wider than the live page's 1170px Bootstrap container, and the same measure
   Panorama uses, so the two designs agree. The bar below is centred on the
   same number. */
.fm-in{max-width:1320px;margin:0 auto;padding:0 var(--fm-edge)}
@media(max-width:700px){.fm{--fm-edge:16px}}

/* ---- the top line: where you came from, and who may edit ---------------- */
/* The fill and the edge are the Watch / Ask / My Notes tiles' (owner,
   2026-09-24: "make it similar to the My Notes button"). It read as a plain
   white pill on a white head, which is a control you have to look for.
   Written through the same --ac-* hooks those tiles use rather than repeating
   the literals, so a design that retints them retints this with them. */
.fm-back{display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 13px;
  border:1px solid var(--ac-line,rgba(var(--acc-rgb),.28));border-radius:9px;
  background:var(--ac-bg,rgba(var(--acc-rgb),.05));
  font-size:14px;font-weight:600;color:var(--ac-ink,var(--ink-2));white-space:nowrap;transition:.15s}
/* i.fa, not i: styles-bootstrap.css carries `.override .fa{line-height:inherit}`
   at (0,2,0), so a bare .fm-back i (0,1,1) loses and the chevron drags the
   button 7px taller than the page line-height. */
.fm-back i.fa{font-size:18px;line-height:1;color:var(--mut);transition:.15s}
.fm-back:hover{border-color:var(--ac-line-h,var(--acc));
  background:var(--ac-bg-h,rgba(var(--acc-rgb),.12));color:var(--ac-ink-h,var(--ink))}
.fm-back:hover i{color:var(--acc)}
/* Two ways back on purpose (the owner asked for the button on 2026-09-09):
   the button in the corner is the one you see, and the auction's own name in
   the line under the title says where it goes. */
/* The blanket `.fm-sub a{color:var(--acc)}` this used to out-specify is gone -
   the auction name is the only link in the line, so it carries its own colour.
   Green on a near-white ground measures 2.97:1, well under the 4.5:1 body text
   needs, so it is ink at rest and green on hover. `display:inline` on purpose:
   this was an inline-flex box, which cannot break across lines, so a long
   auction name had to start a line of its own and could overflow the column. */
.fm-auc{display:inline;color:var(--ink-2);font-weight:600;
  transition:color .15s,border-color .15s;border-bottom:1px solid var(--line)}
.fm-auc:hover{color:var(--acc);border-bottom-color:rgba(var(--acc-rgb),.4)}
.fm-edit{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border:1px solid #E0B54B;border-radius:9px;background:#FCF4E0;font-size:14px;font-weight:600;
  color:#7A5A10;transition:.15s}
.fm-edit:hover{background:#F7E9C4;color:#5E4408}

/* Share, beside the way back (owner, 2026-09-28). NEUTRAL, not tinted, and
   that is the whole design decision: .fm-back already wears the action tiles'
   fill and edge, and two green pills side by side would be two primary
   actions where the page has one. Icon only, so it reads as the smaller of
   the two without needing to be quieter in colour as well.

   It carries .fm-back's own vertical padding rather than a height, so the two
   come out the same size without either naming one: 9px, plus a line box the
   size of .fm-back's 14px/1.65 text, plus 9px. .fm-head__r stretches its
   children on top of that, which keeps them equal if .fm-back ever changes.

   Both are needed. Stretch alone collapsed this to 22px in the split pane,
   where .fm-back is hidden and there is no taller sibling to stretch to.

   Gone below 1000px, where the black bar is showing and has its own. For a
   seller that row survives to hold Edit Lot, so without this both would be
   on screen at once. */
.fm-share{display:inline-flex;align-items:center;justify-content:center;
  padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;
  color:var(--ink-2);cursor:pointer;-webkit-appearance:none;appearance:none;margin:0;
  transition:border-color .15s,color .15s,background .15s}
.fm-share:hover{border-color:var(--ink);color:var(--ink);background:var(--wash)}
.fm-share .msy{font-size:20px;line-height:23px}
.fm-share:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(max-width:1000px){ .fm-share{display:none} }

/* ---- the head ----------------------------------------------------------- */
/* Full width, above both columns, so the photograph and the bidding panel start
   on the same line (owner, 2026-09-08).
   A grid rather than a flex row: the title and the lot paging share row one and
   are centred against each other, so they line up horizontally however tall the
   title wraps, and the auction line sits underneath in row two. */
/* Column one is the stage below it, to the pixel: the title and the line under
   it run to the right edge of the photograph and turn there. A max-width on
   the h1 cannot do this - a percentage there resolves against its grid area,
   which is already short of the button, so it came up 175px narrow. */
/* No top padding of its own (owner, 2026-09-28: "move gallery lot detail up a
   bit... but not too much"). Three paddings were stacking above the title on
   a desktop - the body's --hdrgap under the site header, .fm-cols's 20px, and
   another 20px here - which put 66px between the green bar and the first
   letter of the lot's name. This is the one of the three that was paying
   twice: below 1000px it was already taken off for the same reason, because
   something above it was already making the room. 46px now, and the other two
   are untouched so the catalog and the page top are where they were. */
.fm-head{display:grid;
  grid-template-columns:calc(100% - var(--fm-panel) - var(--fm-gutter)) auto;
  align-items:start;column-gap:24px;row-gap:6px;padding:0 0 2px;--fm-caplift:-6px}
/* The title's TOP reads level with the top of the button beside it (owner,
   2026-09-28). Two things had to happen for that, and only one of them is the
   obvious one.

   align-items went center -> start, which lines the two BOXES up. That alone
   still leaves the title looking low, because a line box is taller than the
   letters in it: above the capitals sit the half-leading and the gap every
   font leaves between its ascent and its cap height. The eye lines up the
   ink, not the box, so --fm-caplift takes that back.

   6px, and it was MEASURED, not calculated. Canvas TextMetrics said 8.3px and
   that put the capitals visibly above the button's edge - the metrics it
   reports are not the metrics the layout used. What settled it was a 1px rule
   drawn across the window at the button's own top and the value walked until
   the capitals sat on it. If this ever needs redoing, do it that way.

   ONE value for all three title sizes on purpose. The lift is half-leading
   plus cap gap; as the size steps down the line-height ratio opens up, so the
   half-leading grows by about as much as the cap gap shrinks. 25/1.22 wants
   6.0px and both 22/1.36 and 20/1.42 want about 6.8px, so a flat 6px is
   inside a pixel of all three and does not need three rules that will drift.

   It goes to 0 at 1000px and under, where there is usually nothing beside the
   title to line up with - see the block that turns it off for exactly when. */
.fm-name{grid-row:1;grid-column:1}
/* The button SPANS both rows instead of sitting in the first one (owner,
   2026-09-28: "move auction and seller info closer to the lot title").

   In row 1 it was the tallest thing there, so row 1 was 43px for a 24px
   title and the meta line underneath was pushed down by the difference - the
   gap between the title and its own subtitle was being set by how tall a
   button on the other side of the page happened to be. The row-gap of 6px
   this grid asks for had never once been what you saw.

   Spanning takes it out of that: row 1 is the title's height, row 2 follows
   6px later, and the button is simply tall enough to reach across both of
   them. align-self:start keeps its top where the title's capitals are.

   The 760px block puts it back in a row of its own (grid-row:3), later in
   the file, so the phone layout is untouched. */
/* stretch, not center: the three controls that can sit here - Edit Lot, Share,
   Back to Catalog - are then all as tall as the tallest of them, and none of
   them has to state a height that the other two are kept level with by hand.
   Share carries no vertical padding at all for exactly this reason. */
.fm-head__r{grid-row:1/span 2;grid-column:2;align-self:start;justify-self:end;
  display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.fm-sub{grid-row:2;grid-column:1}
/* Below the photographs the head is no longer opening the page; the grid's
   18px row-gap above it was all that parted the title from the thumbnail
   strip, which read as the title sitting on the photographs (owner,
   2026-10-02, on a phone: "The item title is too close to the slider
   thumbnails, also add more spacing below the item title - above auction and
   seller info"). 10px of padding takes that to 28px, and the meta line gets
   6px of its own on top of the grid's 6px row-gap, 12px in all - only here, in
   the one-column layout: the desktop's 6px is the owner's own call of
   2026-09-28 ("move auction and seller info closer to the lot title").

   The catalog's lot pane keeps both at 0: its head is on top of the pane, not
   under a strip (.lx-pane rules in lotx-shared.css out-rank the first; the
   second is answered just below). */
@media(max-width:1000px){
  .fm-cols>.fm-head{padding-top:10px}
  .fm-head .fm-sub{margin-top:6px}
  .lx-pane .fm-head .fm-sub{margin-top:0}
  /* Back to Catalog is display:none from here down and the whole right column
     leaves the grid with it (lotx-shared.css), so there is nothing beside the
     title and the lift would only be a title sitting 6px high for no reason.

     Unless a seller is looking at their own lot: Edit Lot keeps the row, the
     button is back beside the title, and so is the thing the lift is for. */
  .fm-head{--fm-caplift:0px}
  .fm-head:has(.fm-head__r--edit){--fm-caplift:-6px}
}
@media(max-width:760px){
  .fm-head{grid-template-columns:minmax(0,1fr);row-gap:6px;padding-top:12px}
  .fm-name{grid-row:1}
  .fm-sub{grid-row:2}
  /* One button now, so it lines up under the title rather than stretching the
     width of the phone. The grid's row-gap above is sized for title-to-meta,
     which is too tight under a button, so this row buys its own back. */
  .fm-head__r{grid-row:3;grid-column:1;justify-self:stretch;justify-content:flex-start;
    margin-top:5px}
}
/* Two classes on purpose: styles-bootstrap.css carries `.override h1` at
   (0,1,1), so a bare .fm-name (0,1,0) loses and the title rendered at 2.25em. */
/* No bottom margin: the grid's row-gap does that spacing, and a margin here
   shifts the title's box 4px off centre from the button beside it. No
   width is the head's first column, which is cut to the stage. */
.fm-head .fm-name{font-size:25px;line-height:1.22;letter-spacing:-.015em;font-weight:700!important;
  margin:var(--fm-caplift,0) 0 0!important;text-wrap:pretty}
/* Two steps down for the titles that are really descriptions - cvf/ajax/item.php
   picks the class from the decoded character count - and the weight, the tracking
   and the leading step with the size, because at that length a title is read as a
   sentence rather than as a sign.
   Negative tracking is a DISPLAY setting. It belongs on a four word lot name at
   25px and nowhere near a 20 word one at 17px, where it closes up exactly the
   punctuation these titles are full of - "(100-ft.)", "5-Socket", '96" x 35"' -
   and is what the owner was reading as hard and unclean (2026-09-17).
   700 over three or four lines is a wall for the same reason: a description
   wants a reading weight. 600 is safe to ask for because lx_head_assets() loads
   Inter at 400;500;600;700, so it is a real Semibold face and not a synthesised
   one - check that list before reaching for a weight that is not in it.
   Both long steps need !important of their own to beat the base rule's. */
.fm-head .fm-name--long{font-size:22px;line-height:1.36;letter-spacing:normal;
  font-weight:600!important}
.fm-head .fm-name--xlong{font-size:20px;line-height:1.42;letter-spacing:normal;
  font-weight:600!important}
@media(max-width:700px){
  .fm-head .fm-name{font-size:21px}
  .fm-head .fm-name--long{font-size:18.5px}
  .fm-head .fm-name--xlong{font-size:17px}
}
/* The meta line. What used to be a 14.5px line at a 1.65 line-height - two loose
   lines with a stranded "|" at the end of the first - is one tight pair now, and
   the labels do the separating that the pipe used to.
   A wrapping flex row, and the two properties that make it behave: each item is
   a flex ITEM, so it takes a whole line before it will break in half, which is
   what keeps "Seller:" off the end of the auction name; and each is a block
   container, so an auction name too long for one line still wraps inside its own
   item like the text it is. `min-width:0` is what lets it, since a flex item's
   floor is otherwise its longest word. Putting the flex on the item instead -
   which is what .fm-auc used to do - buys the first half and loses the second. */
.fm-sub{font-size:14px;line-height:1.45;color:var(--mut);
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:16px;row-gap:2px}
.fm-sub__i{min-width:0}
.fm-sub__k{color:var(--mut)}
.fm-sub__v{color:var(--ink-2);font-weight:600}
.fm-shut{color:var(--bad-ink);font-weight:600}
@media(max-width:700px){.fm-sub{font-size:13.5px}}

/* ---- the two columns ---------------------------------------------------- */
.fm-cols{display:grid;grid-template-columns:minmax(0,1fr) var(--fm-panel);
  column-gap:var(--fm-gutter);row-gap:20px;align-items:start;padding-top:20px}
/* The head is IN this grid now, second in the markup, after the photographs.
   Two columns means there is a full width row above them for it, so it spans
   and `order:-1` lifts it there - the layout it has always had. One column
   means the markup order stands and the reader gets the photograph first
   (owner, 2026-09-18). `order` is what moves it rather than an explicit row,
   because auto-placement has to keep working for the one-column case and a
   fixed `grid-row` would collide there. */
.fm-cols>.fm-head{grid-column:1/-1;order:-1}
/* A seller's notice (category 'ad') has nothing to bid on, so no panel: the
   photographs take the whole width (owner, 2026-10-01: "When a lot is a ad /
   notice, can you make the slider occupy the entire space").
   cvf/ajax/item.php has printed .fm-cols--full for an ad all along, but no
   rule ever answered it, so the stage sat in the first of two columns with an
   empty 376px one beside it. Below 1000px .fm-cols is one column anyway. */
.fm-cols--full{grid-template-columns:minmax(0,1fr)}
@media(max-width:1000px){
  .fm-cols{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:14px}
  .fm-cols>.fm-head{order:0}
}
/* The panel is under the stage now, so there is no edge to line up with. The
   lower bound keeps this off the phone layout, which is one column already
   and would otherwise pay a 24px gap for an empty second track. */
@media(max-width:1000px) and (min-width:761px){
  .fm-head{grid-template-columns:minmax(0,1fr) auto}
}

/* ---- gallery ------------------------------------------------------------ */
/* A fixed height (owner, 2026-09-08), so the frame is the same on every lot and
   the page does not change shape as you step through the photographs. Nothing is
   cropped to achieve it: the picture is contained and the blurred copy behind it
   fills whatever the shape leaves over. */
.fm-stage{position:relative;width:100%;height:520px;background:var(--card);border-radius:14px;
  overflow:hidden}
@media(max-width:1000px){.fm-stage{height:460px}}
@media(max-width:700px){.fm-stage{height:360px}}
@media(max-width:520px){.fm-stage{height:320px;border-radius:10px}}
/* Edge to edge and black on a phone (owner, 2026-09-18). The stage cancels
   .fm-in's gutter with a negative margin of exactly `--fm-edge`, which is why
   that is a token; `width:auto` is the other half, because the base rule says
   `width:100%` and an explicit width does not grow to fill a negative margin -
   it would sit 100% wide, shifted left, and hang off the right.
   The ground is the BAR's colour, not --card and not pure black (owner,
   2026-09-18): with no blurred wash on a phone (see below) a contained
   photograph letterboxes against flat colour, and running the same near-black
   as the bar above it makes the two read as one dark frame around the picture
   rather than as two different darks meeting. `--lx-shell` is declared on
   :root in lotx-shared.css, the one sheet both pages load, so this and the bar
   cannot drift; the literal is only a fallback.
   The radius goes with the inset - there is no corner left to round - and so
   does the inner hairline, which was drawn to make a light wash read as a
   surface and has nothing to say on a dark one. */
@media(max-width:700px){
  .fm-stage{width:auto;margin-left:calc(var(--fm-edge) * -1);margin-right:calc(var(--fm-edge) * -1);
    border-radius:0;background:var(--lx-shell,#12161C)}
  /* And nothing between the stage and the bar above it. While the stage was a
     rounded card on a light page this 14px was the room it needed; now that
     both are the same near-black it is a pale seam across the top of the
     photograph, which is the opposite of what matching the colour was for. */
  .fm-cols{padding-top:0}
  .fm-stage::after{display:none}
  /* Enlarge keeps its distance from the picture's edge, not the screen's. */
  .fm-stage__z{right:calc(var(--fm-edge) + 4px)}
}
.fm-stage img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
/* A video slide (owner, 2026-09-21: the arrows "never show the videos"). It
   fills the same frame a photograph does and is contained the same way, so
   walking from a picture to a video does not change the shape of the stage.
   Its own dark ground rather than the stage's, because a video's letterbox
   is part of the video and should read as one object.
   z-index:2 puts it where .fm-stage__img sits - above the blurred wash at 0
   and the inner edge at 1, below the arrows at 3 - or the controls would be
   under the stage's own overlay and unpressable. */
.fm-stage__vid{position:relative;z-index:2;display:block;width:100%;height:100%;
  object-fit:contain;background:#000;cursor:default}
/* The arrows sit over the picture, and over a video they would sit over its
   controls too. On the slide that is a video they get out of the way of the
   bottom strip where the scrubber lives. */
.fm-stage__slide--v{background:#000}
/* Two things have to keep off the video's own control bar, which is about 48px
   tall and runs the full width along the bottom. LXItem puts `is-vid` on the
   stage while the slide showing is a video; see show() in lotx-item.js.
   1. Enlarge, which otherwise sits on top of the fullscreen button.
   2. The ARROWS - and this one was a real fault, not a near miss. Each arrow
      is an invisible zone 22% wide running the FULL HEIGHT of the stage at
      z-index 3, so the bottom-left corner of that zone lies exactly over the
      video's play button: pressing play stepped to the previous slide instead
      (owner, 2026-09-21). Stopping both zones above the control bar hands
      those pixels back to the video. */
.fm-stage.is-vid .fm-stage__z{bottom:64px}
.fm-stage.is-vid .fm-arw{bottom:56px}

/* ---- the stage slides sideways ----------------------------------------- */
/* A real horizontal scroller with snap points, not a JS drag. The browser
   tracks the finger, rubber bands at the ends and carries the momentum itself,
   which is the half that is hard to get right on a phone, and `mandatory` snap
   lands on a photograph every time. `scroll-snap-stop:always` stops a hard
   flick skipping three lots' worth of pictures at once.

   `touch-action` is deliberately left alone: the browser then decides the axis
   from the gesture, so a finger dragged UP the photograph still scrolls the
   page. `overscroll-behavior-x:contain` keeps a swipe past the last photograph
   from turning into the browser's own back gesture.

   The track carries z-index:0 so it is a stacking context of its own: the
   stage's inner edge (::after, z-index 1), the arrows (3) and Enlarge (4) then
   sit above every slide in it without each slide having to know about them. */
.fm-stage__track{position:absolute;inset:0;z-index:0;display:flex;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.fm-stage__track::-webkit-scrollbar{display:none}
.fm-stage__slide{position:relative;flex:0 0 100%;width:100%;height:100%;
  scroll-snap-align:center;scroll-snap-stop:always;overflow:hidden}
/* A drag is not a click: the tap that opens PhotoSwipe is suppressed while the
   track is being pushed (LXItem sets this), and the pointer says so. */
.fm-stage__track.is-dragging .fm-stage__img{cursor:grabbing}
/* `scroll-behavior` is deliberately NOT set here. Its duration belongs to the
   browser, and Chrome's is around 300-500ms; the arrows and the thumbnails are
   glided by LXItem instead, in 180ms, and a reader who has asked for less
   motion is moved with no animation at all. A finger never went through it:
   dragging is direct manipulation and the flick after it is native momentum. */
/* Catalogue photography is often shot on white, so a contained image leaves
   dead bars. A blurred copy of the same picture fills them.
   The backdrop is absolutely positioned and the photograph is not, so without
   an explicit layer the backdrop paints OVER it (positioned elements sit above
   in-flow content) and the whole stage went dark. */
/* The gap either side of a photograph that does not match the frame is the hard
   part. Filling it with the picture's own colours at full strength only moved
   the problem: object-fit:cover crops a portrait shot to a wide band, so the
   sides showed a magnified slice of the middle of the picture, often much darker
   than the picture itself.
   So the surround is a WASH, not a copy: the same image blurred past all
   structure, at half opacity over the card colour. It keeps the lot's hue - a
   red machine still sits in a warm frame - but stays close to the page's own
   brightness, which is what makes the gap stop announcing itself. */
/* `.fm-stage .fm-stage__bg`, not `.fm-stage__bg`: `.fm-stage img` a few rules
   up is (0,1,1) and beats a bare class at (0,1,0), so it was quietly winning
   width, height and object-fit here. It had always won object-fit, which is why
   the wash rendered `contain` rather than the `cover` this rule asks for -
   invisible under the blur, and the reason it went unnoticed for weeks.

   DESKTOP ONLY. A phone gets no blur at all; see the media query below for why,
   and do not try to make this one cheaper instead. Two things were tried and
   neither works: drawing it into a smaller box and scaling it back up, and
   giving it a compositor layer of its own. Chrome rasterises at DEVICE scale,
   so the transform is folded into the raster matrix and the radius scales
   straight back up either way. */
.fm-stage .fm-stage__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:blur(64px) saturate(1.7) brightness(1.04);transform:scale(1.5);
  pointer-events:none;
  /* Only the slide being looked at, and the one either side of it, pay for
     this: a blur is charged by the area it covers, and a lot with ten
     photographs would otherwise ask for ten of them. Snap means you can never
     see a slide that is not the current one or its neighbour.
     visibility, not display: the box stays, so nothing moves.
     `content-visibility:auto` was the obvious tool and is NOT used, because
     `contain-intrinsic-size` takes no percentage - a skipped slide would have
     had no size to stand in for it. LXItem sets the class. */
  visibility:hidden}
.fm-stage__slide.is-near .fm-stage__bg{visibility:visible}
/* The faintest inner edge, so the wash reads as a surface rather than a spill. */
.fm-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(16,19,23,.06),inset 0 0 60px rgba(16,19,23,.05)}
/* drop-shadow follows what is actually painted, so with object-fit:contain this
   lands exactly on the photograph's edges wherever they fall - the one way to
   soften that seam without fading any of the picture itself. */
.fm-stage__img{position:relative;z-index:2;
  filter:drop-shadow(0 1px 2px rgba(16,19,23,.16)) drop-shadow(0 6px 28px rgba(16,19,23,.20))}
/* Not on a phone. Two drop-shadows on a full-bleed photograph is a filter pass
   over the whole stage every time it moves, and the seam they soften is barely
   there at this size. */
@media(max-width:1000px){.fm-stage__img{filter:none}}

/* ---- and NO blurred wash at all on a phone (owner, 2026-09-17) ----
 *
 * This is the thing that was emptying the page while scrolling, established by
 * elimination on the owner's own device: with `?lxoff=wash` the fault is gone,
 * and with `?lxoff=nolayer` - the wash kept, only its compositor layer taken
 * away - it comes straight back. So the blur is the cost and the layer was
 * never saving it.
 *
 * Every attempt to make it cheap failed for the same reason. `blur()` is
 * charged in DEVICE pixels, and at 3x a 515x480 box is a 192-pixel radius over
 * 2.2 million pixels. Drawing it small and scaling it up does not help either,
 * because Chrome rasterises a promoted layer at its COMPOSITED size: the
 * scale(4) simply made it re-rasterise the blur at full size again. There is no
 * way to keep a real blur here and keep the page painting.
 *
 * So the bars either side of a contained photograph fall back to the stage's
 * own colour, which is what `.fm-stage` has always been. It is the same
 * treatment `?lxoff=wash` renders, and it reads perfectly well at this size.
 *
 * A DESKTOP keeps the wash: one of these on a machine with power to spare has
 * never been a problem, and this is the only place the effect earns its keep.
 *
 * If the lot's colour is wanted back on a phone, the way to do it is a
 * PRE-BLURRED source - a tiny derivative written next to the thumbnail and
 * scaled up with no filter at all, because upscaling is free and blurring is
 * not. That needs an image-processing step, so it is a separate piece of work.
 */
@media(max-width:1000px){
  .fm-stage .fm-stage__bg{display:none}
}
.fm-stage__z{position:absolute;right:12px;bottom:12px;z-index:4;background:rgba(12,13,16,.6);
  backdrop-filter:blur(8px);color:rgba(255,255,255,.92);border:0;border-radius:20px;
  /* see the phone rule further down: backdrop-filter is dropped there */
  padding:6px 13px;font-size:12px;font-weight:600;cursor:zoom-in;display:inline-flex;
  align-items:center;gap:7px}
.fm-stage__z:hover{background:rgba(12,13,16,.9);color:#fff}
/* The circle is only the visible part. The button itself is the whole left or
   right side of the photograph, so a click anywhere down that edge steps the
   strip without having to find the arrow (owner, 2026-09-10). i.fa, not i: the
   theme carries `.override .fa{line-height:inherit}` at (0,2,0) and would stand
   the circle up on end. */
.fm-arw{position:absolute;top:0;bottom:0;z-index:3;width:22%;max-width:170px;
  display:flex;align-items:center;border:0;background:transparent;padding:0 14px;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.fm-arw--p{left:0;justify-content:flex-start}
.fm-arw--n{right:0;justify-content:flex-end}
/* flex:0 0 auto or the circle is squeezed out of shape inside a narrow zone -
   it came out 35px wide at 320. */
.fm-arw i.fa{flex:0 0 auto;width:44px;height:44px;line-height:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(12,13,16,.55);
  backdrop-filter:blur(8px);color:rgba(255,255,255,.92);font-size:18px;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.fm-arw:hover i.fa{background:rgba(12,13,16,.9);border-color:#fff;color:#fff}
.fm-arw:focus-visible{outline:2px solid var(--acc);outline-offset:-5px;border-radius:14px}
@media(max-width:560px){.fm-arw{padding:0 8px}}
/* The wide edge zone is a MOUSE convenience (owner): a click anywhere down the
   left or right fifth of the photograph steps it, so a pointer never has to
   find a 44px circle. On a touch screen it is the opposite of helpful - that
   same edge is where a swipe begins, and the track underneath is a real
   scroller on purpose - so there only the circle itself takes the tap (owner,
   2026-09-18). The zone keeps its box and its position and simply stops taking
   pointer events.
   `(pointer:coarse)` is the condition that actually matters, since this is
   about fingers and not about width: it catches a tablet at 1024 that a width
   query would miss. The width query is kept beside it so a desktop window
   dragged down to phone size behaves the way it looks.
   No JS change: the handler is delegated on `[data-step]`, so a tap landing on
   the <i> still bubbles to the button. Hover still works for a touch laptop,
   because :hover on an ancestor matches when a pointer-events:auto child is
   hovered, and :focus-visible never depended on pointer events at all.
   Worth knowing it is a gain and not just a removal: the zone sat over the
   track at z-index 3, so a swipe that began at either edge hit a button and
   went nowhere. It now passes straight through to the scroller. */
@media (pointer:coarse),(max-width:700px){
  .fm-arw{pointer-events:none}
  .fm-arw i.fa{pointer-events:auto}
}
/* One sideways row, however many photographs there are (owner, 2026-09-08).
   Arrows on a desktop, because the scrollbar is hidden and a strip that runs
   off the edge with no affordance gives no clue there is more; a phone just
   swipes it. */
.fm-thumbs{position:relative;margin-top:12px;--thumb:74px;--gap:9px}
@media(max-width:520px){.fm-thumbs{--thumb:60px;--gap:8px}}
.fm-strip{display:flex;gap:var(--gap);overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.fm-strip::-webkit-scrollbar{display:none}
.fm-th{flex:0 0 auto;scroll-snap-align:start;width:var(--thumb);height:var(--thumb);border-radius:9px;
  overflow:hidden;border:2px solid transparent;background:var(--wash);cursor:pointer;padding:0;
  opacity:.7;transition:.16s}
.fm-th img,.fm-th__v{width:100%;height:100%;object-fit:cover;display:block;background:#000;
  pointer-events:none}
.fm-th:hover{opacity:.92}
.fm-th.is-on{opacity:1;border-color:var(--acc)}
.fm-th--v{position:relative}
.fm-th--v::after{content:"\f04b";font-family:FontAwesome;position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;font-size:15px}
.fm-thnav{position:absolute;top:calc(var(--thumb) / 2);transform:translateY(-50%);z-index:2;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:0 4px 14px rgba(0,0,0,.12);transition:.15s}
.fm-thnav:hover{border-color:var(--ink);color:var(--ink)}
.fm-thnav--p{left:-10px}
.fm-thnav--n{right:-10px}
.fm-thnav.is-off{opacity:0;pointer-events:none}
.fm-thumbs.is-static .fm-thnav{display:none}
@media(max-width:820px){.fm-thnav{display:none}}

/* ---- the bidding panel -------------------------------------------------- */
.fm-side{position:sticky;top:calc(var(--navh,70px) + 16px)}
@media(max-width:1000px){.fm-side{position:static}}
.fm-panel{background:var(--card);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  box-shadow:var(--lift-2)}

/* The bidder's status used to head this panel as a full-width strip, green
   for Top Bidder and red for Outbid (2026-09-29, tinted and then solid). The
   owner turned both down the same day: "I do not like this status
   notification color also I do not like the location of it", wanting the
   catalog card's chip instead. It is that chip now, beside Current Bid - see
   .fm-status below - and nothing is printed up here. */

/* The countdown IS the panel header (owner, 2026-09-08): a row that said
   "Bidding information" above a row that said what you actually needed to know
   was one row too many. The watch star moves in with it.
   Label above value, not beside it: "26 days 0 hrs 47 mins 33 secs" plus a
   label plus the star does not fit a 376px column on one line, and it broke
   mid-figure. */
/* The lot plate rides at the far right of this row (owner, 2026-09-24, asking
   for "a nice location to put the Lot #"). .fm-clock__l was already the left
   half of a flex row that had lost its right half - the watch star used to be
   the other one, see the note above - so the slot was sitting here empty and
   only the display was missing. It is built exactly as the catalog card's
   plate is built, off the same two token names, so the mark on the card you
   pressed is the mark you land on. */
.fm-clock{--band-h:34px;--band-fs:14px;
  padding:15px 20px 14px;background:var(--card);border-bottom:1px solid var(--line);
  color:var(--ink-2);display:flex;align-items:center;gap:12px}
.fm-clock__l{min-width:0;flex:1 1 auto}
/* The lot number is type in the band, not a plate (owner, 2026-09-28) - see
   the note on .bd-lotline in lotx-list.css, which this follows exactly. It
   keeps the .fm-plate class: cvf/ajax/item.php prints it and the name still
   says what it holds, which is the lot number. */
.fm-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}
.fm-clock__v{font-size:17px;line-height:1.25;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:4px}
/* The countdown reads as a clock face - "20d 21:07:31" behind the catalog's
   own timer glyph - rather than as a sentence (owner, 2026-09-24). The flex
   goes on whichever element is actually holding the text, and that differs:
   an ALC lot's tick writes .fm-clock__t inside a paragraph in here, while a
   lot with no ALC has its text written straight into .fm-clock__v. 1.07em is
   the catalog card's own figure for this glyph against this text. */
.fm-clock__t,.fm-clock__v[data-lx-itemclock]{display:inline-flex;align-items:center;gap:6px}
.fm-clock__v .msy{font-size:1.07em;line-height:1}
/* A running countdown and the lot number are the two ends of one tinted band,
   exactly as a catalog card carries the pair (owner, 2026-09-25 for the
   pairing, 2026-09-28 for the band). --band-h and --band-fs are declared on
   .fm-clock for both, so the two cannot drift apart at any width - the same
   trick the card uses on .bd-lotline.

   Only the three modifiers get this - .fm-clock--live, .fm-clock--shut and,
   since 2026-10-02, .fm-clock--soon for a lot whose auction has not opened
   (the open band, holding the lot number alone; owner: "the Lot number must
   use the same band design we have when auction is open for bidding"). It
   was a label over a date there, outside any band. The bare .fm-clock is
   left unbanded for anything else that might print one. */
/* The whole ROW becomes the band, because there is no wrapper inside it to
   make one of: the lot number and .fm-clock__l are siblings here, and they
   have to stay siblings - scripts/lotx-item.js rewrites __l's innerHTML
   wholesale on every tick, so anything put inside it is gone a second later.
   The row's padding becomes a margin and the band sits inset in the panel.

   --live, --shut (below, since 2026-09-30) and --soon (2026-10-02). */
.fm-clock--live,.fm-clock--shut,.fm-clock--soon{display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:var(--band-h);margin:15px 20px;padding:0 11px;
  border:1px solid #D3DBF4;border-radius:9px;background:#EEF1FB}
/* A hairline under the band, edge to edge across the panel, parting the lot's
   head from the money (owner, 2026-09-30, from a mockup: "make it look exactly
   as attached where there's a border, follow same spacing as well"). Measured
   off that mockup at 2x: 15px from the band to the line, the line 1px in
   --line-2, and 15px from the line to the top of the CURRENT BID capitals -
   10px of padding plus the 5px the 11px label sits below its own line top.
   The band's bottom margin went 6px to 15px and the money's top padding 18px
   to 10px, so the pair is 2px taller than before and nothing below moves.
   It is the money block's top border rather than anything on the band, so it
   runs the panel's full width without knowing the band's inset, and only
   after a band - which a lot not yet open has too now (--soon). */
.fm-clock--live + .fm-money,.fm-clock--shut + .fm-money,.fm-clock--soon + .fm-money{border-top:1px solid var(--line-2);padding-top:10px}
.fm-clock--live .fm-clock__l,.fm-clock--shut .fm-clock__l,.fm-clock--soon .fm-clock__l{display:flex;align-items:center;justify-content:flex-end}
.fm-clock--live .fm-clock__v,.fm-clock--shut .fm-clock__v{margin-top:0}
.fm-clock--live .fm-clock__t,
.fm-clock--live .fm-clock__v[data-lx-itemclock]{
  height:auto;padding:0;border-radius:0;background:none;color:#1B33A3;
  font-size:var(--band-fs);font-weight:700;letter-spacing:-.02em}
/* A CLOSED lot is the same band, stopped (owner, 2026-09-30: "clean up this
   design, it doesnt look nice"): the lot number left, "Closed" right where the
   countdown was, in the page's neutral wash - exactly what a closed catalog
   card's band does (.bd-lotline:has(.lx-timer.is-closed) in lotx-list.css),
   so a lot that closes reads the same on the card and on the page. It was a
   full-width red row holding a CLOSED label over "This lot has closed": the
   one word twice, at twice the band's height. The lot number, the word, the
   edge and the fill are the design's red (owner, same day: "Instead of grey
   color, let's use red for text and band border", then "instead of grey
   background, use a light red") - the card's closed band in the same three
   colours. The "Bidding has closed" box below says the rest. */
.fm-clock--shut{background:var(--bad-bg);border-color:rgba(168,52,28,.34)}
.fm-clock--shut .fm-plate{color:var(--bad-ink)}
.fm-clock--shut .fm-clock__v{color:var(--bad-ink);font-size:var(--band-fs);font-weight:700;letter-spacing:-.02em}
/* And the price's label under a closed band - Sold For, Highest Bid or
   Starting Price - in the same red (owner, 2026-09-30: "Make the text red
   color", of SOLD FOR). Read off the band as a sibling, so the live close in
   scripts/lotx-item.js turns it red by adding .fm-clock--shut and nothing
   else. The figure itself keeps its ink. */
.fm-clock--shut + .fm-money .fm-k{color:var(--bad-ink)}
/* The catalog card's "Bidding has closed" box (.lx-bid__flat, lotx-shared.css)
   at the lot page's Bid button's size, since it stands where that button
   stood (owner, 2026-09-30: "make this ... as big as the size of the Bid
   button"): .fm-go's 16.5px on its 16px 22px padding and the panel's leading,
   59px tall. Scoped to .fm-act, so the card keeps its own smaller box. */
.fm-act .lx-bid__flat{padding:16px 22px;font-size:16.5px}

/* Current Bid on the left, the bidder's status chip on the right (owner,
   2026-09-29, chosen from three mockups over the photograph, the title and
   here). The chip is the catalog card's own - .lx-status .lx-chip in
   lotx-shared.css - so this only places it.

   A wrapping flex row rather than two grid columns, for the long figure:
   .fm-money__l is flex-basis 0 with its automatic minimum, which is the
   widest thing it cannot break - the amount, or the "Reserve not met" pill.
   So the chip stays beside the figure while the two fit, and drops to a line
   of its own under it when they do not, instead of the amount running into
   it (a seven figure bid does that in a 376px panel). Inside, the reserve
   pill already wraps under the amount on its own. Centred against the label
   and the figure together, which is where the eye lands on both. */
.fm-money{padding:18px 20px 4px;display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:10px}
.fm-money__l{flex:1 1 0}
.fm-status{flex:none;max-width:100%}
.fm-status:empty{display:none}
/* Its own line, and 12px under the figure as it always was: the row-gap
   above is 10 of them. */
.fm-money > .fm-sold{flex-basis:100%;margin-top:2px!important}
.fm-k{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);font-weight:600}
/* Centred against the figure, not sitting on its baseline: the chip is a pill,
   not a word in the same sentence. */
.fm-price{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:7px}
.fm-price b{font-size:34px;line-height:1.05;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
@media(max-width:420px){.fm-price b{font-size:29px}}
/* "Reserve not met" is the catalog card's amber chip, drawn by the same rule
   as the card's (.fm-res beside .lx-status .lx-chip.is-reserve in
   lotx-shared.css) since 2026-09-29. It was a grey pill of its own here.
   The span is always printed - the realtime handler needs something to write
   into - and it is empty whenever the reserve is met or there is none. Without
   this it renders as an empty blob beside the price, which it did on
   met-reserve lots for a long time and would now do on nearly every lot.
   .fm-res--no lived here for the green "No Reserve" chip, which went on
   2026-09-24. */
.fm-res:empty{display:none}
.fm-sold{margin:12px 0 0!important;font-size:14.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fm-sold b{color:var(--ink);font-weight:700}

.fm-act{padding:16px 20px 18px}
.fm-go{display:block;width:100%;border:0;border-radius:10px;background:var(--acc);color:var(--acc-ink);
  font-size:16.5px;font-weight:700;padding:16px 22px;cursor:pointer;text-align:center;transition:.15s;
  box-shadow:0 1px 2px rgba(16,19,23,.10),0 8px 20px -8px rgba(var(--acc-rgb),.55)}
.fm-go:hover{filter:brightness(1.06);color:var(--acc-ink);
  box-shadow:0 1px 2px rgba(16,19,23,.10),0 12px 26px -8px rgba(var(--acc-rgb),.62)}
.fm-go:disabled{opacity:.45;cursor:not-allowed}
/* The quantity maths under the label, when there is more than one of the lot.
   Modelled on the list card's .lx-bid__x so a bidder meets the same line in
   both places, sized up a little because this button's label is 16.5px where
   the card's is 14.5.

   The :has() is load bearing, not neatness. .fm-go sets no line-height and so
   inherits the 1.65 READING leading from body.override .fm - 27px a line for
   16.5px text, which the stylesheet already complains about further down. One
   line absorbs that; two lines would have made this button 86px tall, which is
   the exact fault that comment records being fixed on a phone. Scoped to the
   two-line case so a lot with a quantity of one keeps the button it had. */
.fm-go:has(.fm-go__x){line-height:1.25;padding-top:12px;padding-bottom:12px}
.fm-go__x{display:block;font-style:normal;font-size:13px;font-weight:600;opacity:.85;
  line-height:1.3;margin-top:3px;letter-spacing:normal}
/* Pro mode's Bid button, the same as a pro list card's (.lx-bid__go.is-pro in
   lotx-list.css, where the reasons are written out): DARK, in the black bar's
   near-black with a step lighter under the pointer (owner, 2026-10-01), and
   "1-Click" only while the pointer is on it or it has keyboard focus - folded
   away at the right at rest, opening out in the accent, with the label
   centred in everything left of it and gliding over as it opens. The first
   column is for the spinner placeProBid() prepends, which is nothing the rest
   of the time.

   The box under the button IS the pro mode setting, and :has() reads it
   straight off the page, so the colour and the pill come and go the moment
   the box is ticked. Scoped to the button that carries the pill: the dead
   "Invalid Credit Card" button has a bare text label, and a grid would split
   it into cells. The pill is folded with max-width and opacity, never
   display:none, because barMirror() reads its display to know whether the
   floating bar's button is a pro one too. */
.fm-go__1c{display:none}
.fm-act:has([data-probid]:checked) .fm-go:has(>.fm-go__1c){display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding-left:14px;padding-right:14px;
  background:var(--lx-shell,#12161C);color:#fff;
  box-shadow:0 1px 2px rgba(16,19,23,.14),0 8px 20px -8px rgba(16,19,23,.5)}
.fm-act:has([data-probid]:checked) .fm-go:has(>.fm-go__1c):hover{filter:none;
  background:var(--lx-shell-2,#1D242E);color:#fff;
  box-shadow:0 1px 2px rgba(16,19,23,.14),0 12px 26px -8px rgba(16,19,23,.58)}
.fm-act:has([data-probid]:checked) .fm-go:has(>.fm-go__1c):active{background:var(--lx-shell,#12161C)}
.fm-act:has([data-probid]:checked) .fm-go>.fm-go__t{grid-area:1/2;min-width:0;overflow:hidden}
.fm-act:has([data-probid]:checked) .fm-go__1c{display:inline-flex;align-items:center;grid-area:1/3;
  max-width:0;margin-left:0;padding:2px 0;overflow:hidden;opacity:0;border-radius:999px;
  background:var(--acc);color:var(--acc-ink);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;white-space:nowrap;
  transition:max-width .22s ease .04s,margin-left .22s ease .04s,padding .22s ease .04s,opacity .12s ease}
@media (hover:hover){
  .fm-act:has([data-probid]:checked) .fm-go:not(:disabled):hover>.fm-go__1c{max-width:92px;margin-left:16px;
    padding:2px 8px;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}
}
.fm-act:has([data-probid]:checked) .fm-go:not(:disabled):focus-visible>.fm-go__1c{max-width:92px;
  margin-left:16px;padding:2px 8px;opacity:1}
.fm-act:has([data-probid]:checked) .fm-go:has(>.fm-go__1c)>.fa-spin{grid-area:1/1;margin-right:8px}
/* In flight: the pro button, quieter, rather than faded to the half-tone a
   Bid that cannot be pressed at all takes. */
.fm-act:has([data-probid]:checked) .fm-go[disabled]:has(>.fa-spin){opacity:.8;cursor:progress}
.fm-go2{display:block;width:100%;margin-top:10px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink-2);font-size:14.5px;font-weight:600;padding:13px 20px;
  cursor:pointer;text-align:center;transition:.15s}
.fm-go2:hover{border-color:var(--ink);color:var(--ink)}
.fm-signin{display:flex;gap:10px}
/* The green one centres its own text instead of leaving it where a block-level
   line box happens to land. The two buttons in this row stretch to the taller of
   them, and `.fm-go` is `display:block`, so every pixel of that stretch fell
   BELOW the text - measured 14px above it and 20.8px under it, which is the lean
   the owner saw (2026-09-18). Register never had it: it has been an inline-flex
   box with align-items:center all along. Scoped to .fm-signin because this is
   the only row where .fm-go shares its width with anything. */
.fm-signin .fm-go{flex:1;display:flex;align-items:center;justify-content:center}
.fm-signin__r{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;padding:16px 20px;font-size:15px;font-weight:600;
  color:var(--ink-2);transition:.15s}
.fm-signin__r:hover{border-color:var(--ink);color:var(--ink)}

/* Signed out is the one state with TWO buttons sharing the row, so it is the
   one that runs out of width - the signed-in panel has a single full-width
   button and is left alone. Three things were making it 86px tall on a 375px
   phone (owner, 2026-09-18):
   the label used to carry the next bid, and "Sign In to Bid $120,000.00" needs
   about 250px where the button gets 189, so it wrapped to two lines - the amount
   came off the label the same day, which is most of the height on its own;
   `.fm-go` sets no line-height, so it was inheriting the 1.65 READING leading
   from `body.override .fm` - 27px a line for 16.5px text, on a button;
   and the padding is the desktop's 16px top and bottom either way.
   Register loses a little width too, which is width the green one gets back.
   THIS BLOCK HAS TO SIT AFTER `.fm-signin__r` ABOVE. Both are (0,1,0), so order
   is all that separates them, and while it sat before that rule the Register
   half of it lost every declaration and silently did nothing - which is what
   left Register the taller of the two and gave the green one something to
   stretch to. The container-query copy in lotx-shared.css was never affected,
   because that whole sheet loads after this one. */
@media(max-width:700px){
  .fm-signin{gap:8px}
  .fm-signin .fm-go{font-size:15px;line-height:1.25;padding:14px}
  .fm-signin__r{font-size:14px;line-height:1.25;padding:14px}
}

.fm-card{margin:0 0 12px!important;padding:12px 14px;border-radius:9px;background:var(--bad-bg);
  color:var(--bad-ink);font-size:13.5px;line-height:1.55}
.fm-card a{color:var(--bad-ink);font-weight:700;border-bottom:1px solid rgba(168,52,28,.4)}

/* No rule above these, and no padding either (owner, 2026-09-24, in two
   steps). The line sat between the terms block and the Watch / Ask / Notes
   row; the terms block already ends in its own tinted panel, so the border
   was a second separator doing the first one's job. --ac-rule went with it,
   the hook that let a design on a photograph retint that line.

   The padding-top was there to hold this row off that rule, so once the rule
   went it was 16px of nothing on top of the 16px margin - which is why the
   gap under the terms block measured 32px against the 16px above it. The
   margin alone now makes the block sit evenly between the button above it
   and the tiles below. */
.fm-acts{display:flex;gap:8px;margin-top:16px}
.fm-acts button, .fm-acts .btn-watch{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;padding:8px 6px;cursor:pointer;
  border:1px solid var(--ac-line,rgba(var(--acc-rgb),.28));border-radius:9px;
  background:var(--ac-bg,rgba(var(--acc-rgb),.05));font-size:12.5px;font-weight:500;
  line-height:1.25;color:var(--ac-ink,var(--ink-2));transition:.15s;white-space:nowrap}
/* The colour is carried by the icon, the tinted fill and the edge; the label
   stays ink so it is still the most readable thing in the tile. i.fa, not i:
   styles-bootstrap.css carries `.override .fa{line-height:inherit}` at (0,2,0)
   and a bare button i is (0,1,2), so without the second class the icon keeps
   the page line-height and the tile grows as tall as the buttons above it. */
.fm-acts button i.fa, .fm-acts .btn-watch i.fa{font-size:15px;line-height:1;color:var(--ac-icon,var(--acc));transition:.15s}
.fm-acts button:hover, .fm-acts .btn-watch:hover{border-color:var(--ac-line-h,var(--acc));
  background:var(--ac-bg-h,rgba(var(--acc-rgb),.12));color:var(--ac-ink-h,var(--ink))}
.fm-acts button:hover i, .fm-acts .btn-watch:hover i{color:var(--ac-icon-h,var(--acc))}
.fm-acts button:focus-visible, .fm-acts .btn-watch:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* Watching, or a note already written: a deeper tile with a solid edge, and the
   icon fills in (fa-star-o becomes fa-star) while the label changes word. The
   label stays ink on purpose - this brand green sits mid-luminance, so accent
   type on the tint measures 2.7:1 and white type on solid accent 3.2:1, and
   neither is enough for a 12.5px word somebody reads at a glance. */
.fm-acts button.is-on, .fm-acts .btn-watch.is-on{border-color:var(--ac-on-line,var(--acc));
  background:var(--ac-on-bg,rgba(var(--acc-rgb),.16));
  color:var(--ac-on-ink,var(--ink));font-weight:600}
.fm-acts button.is-on i, .fm-acts .btn-watch.is-on i{color:var(--ac-on-icon,var(--acc))}
	
.fm-note{margin:0;padding:14px 20px;background:var(--warn-bg);border-top:1px solid var(--warn-line);
  font-size:13.5px;color:var(--warn-ink);line-height:1.6}
.fm-note b{font-weight:700}
.fm-note button{background:none;border:0;padding:0;cursor:pointer;color:var(--warn-ink);font-weight:700;
  text-decoration:underline;font-size:13.5px}

/* the specifics table, inside the panel where the live page keeps it */
/* A grid of two equal columns rather than a flex row with a percentage on the
   label: every label and every figure then starts on the same axis whatever the
   longest one is. Plain white, separated by a hairline (owner, 2026-09-08):
   the banding read as a table dropped into a panel that has none anywhere else. */
/* Details, at the head of the reading rather than the foot of the bid panel
   (owner, 2026-09-10). Two columns: this panel is as wide as the photograph,
   and one stack of pairs would leave a hand's width of nothing between the
   label and its value on every row. */
.fm-pan .fm-subh{font-size:17px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);
  font-weight:600!important;margin:0 0 4px!important}
/* A table, not a striped list (owner, 2026-09-10: no alternating fills). The
   value sits straight after its label in a column of its own instead of being
   flung to the far right, which over a panel this wide left a hand's width of
   nothing in the middle of every row and made the pairs hard to hold together.
   Rules do the separating: a hairline under each row, one down the middle, and
   a heavier one closing the top of the block.

   It reads downwards, not across: grid-auto-flow fills the left column to the
   row count PHP worked out, then starts the right one. The divider is drawn on
   the container rather than on the cells, because with a column flow no
   nth-child can name "everything in the left half". */
.fm-facts{position:relative;display:grid;grid-auto-flow:column;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows,4),auto);
  column-gap:60px;border-top:1px solid var(--line)}
.fm-facts::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:var(--line-2)}
.fm-fact{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:6px 18px;
  align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line-2)}
.fm-fact dt{color:var(--mut);font-size:13.5px;line-height:1.45}
.fm-fact dd{margin:0;min-width:0;font-size:14.5px;font-weight:600;color:var(--ink);
  line-height:1.45;font-variant-numeric:tabular-nums}
@media(max-width:640px){
  /* One column: the row flow has to come back too, or the grid would keep
     turning the corner after --rows items. */
  .fm-facts{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .fm-facts::before{display:none}
}
/* On a phone the pair goes back onto ONE line, label left and value right -
   the same shape the bid panel's terms block uses, so the two tables on the
   page read alike (owner, 2026-09-25: the Details section "takes up too much
   space on mobile").

   This replaces a stack, and the stack was there for a real reason: with the
   desktop's fixed 132px label column the value got too little room and the
   longest one ran to three lines at 320px. A flex row fixes that properly
   rather than by stacking, because the label is no longer a fixed column -
   it takes only the width of its own words and the value keeps the rest.
   The long LABEL and the long VALUE are never in the same row, which is what
   makes one line safe: "Buyer's Premium" is paired with "10%", and the long
   "$170.00 x 2 = $340.00" is paired with the short "Total Bid".

   Worth roughly 28px a row over eight rows - the block comes down by about
   40% - and nothing is dropped or hidden to get it. `overflow-wrap:anywhere`
   is the safety net for a value with no spaces (a long SKU); it wraps inside
   its own right-aligned box instead of pushing the label off the row. */
@media(max-width:560px){
  .fm-fact{display:flex;align-items:baseline;justify-content:space-between;
    gap:14px;padding:9px 0}
  /* The label never wraps: it comes from a short fixed set in PHP, and
     "Total" / "Bid" broken over two lines reads worse than a value that
     wraps. The value takes whatever is left and wraps inside its own
     right-aligned box. */
  .fm-fact dt{flex:0 0 auto;white-space:nowrap}
  .fm-fact dd{flex:1 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere}
}
/* The description follows the table. No rule of its own: the last row of the
   table already closes with one, and two hairlines 25px apart read as a mistake. */
.fm-body--after{margin-top:26px}

/* ---- the tabbed card ---------------------------------------------------- */
/* One card carrying the three long readings, one at a time, so the page stops
   being a mile of scrolling. The strip itself is skinned by rl_tabs_css(); only
   the placement inside this card belongs to this design. */
.fm-tabwrap{position:relative}
.fm-tabbar{display:none}
.fm-tabs.is-ready .fm-tabbar{display:flex;flex-wrap:wrap;gap:2px;
  border-bottom:1px solid var(--line)}
/* Only a narrow screen needs the strip to scroll, and it should not be a scroll
   container the rest of the time: overflow-x:auto makes the other axis auto too,
   so the -1px the tabs sit on to overlap the rule gave the row a 1px vertical
   scroll of its own, and the box swallowed the wheel wherever it was hovered.
   Wrapping is the fallback above the breakpoint - no design overflows there
   today, but a longer label should fold rather than spill. */
@media(max-width:700px){
  .fm-tabs.is-ready .fm-tabbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;scroll-behavior:smooth}
}
.fm-tabbar::-webkit-scrollbar{display:none}
.fm-tab{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;padding:15px 14px;cursor:pointer;font-size:15px;font-weight:600;color:var(--mut);
  white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.fm-tab:hover{color:var(--ink)}
.fm-tab.is-on{color:var(--acc);border-bottom-color:var(--acc)}
.fm-tab:focus-visible{outline:2px solid var(--acc);outline-offset:-3px;border-radius:6px}
.fm-tab__n{font-size:12px;font-weight:700;line-height:1;padding:4px 7px;border-radius:20px;
  background:var(--wash);color:var(--mut);font-variant-numeric:tabular-nums}
.fm-tab.is-on .fm-tab__n{background:rgba(var(--acc-rgb),.12);color:var(--acc)}
/* A phone cannot fit three of these across, so the strip scrolls. A fade at
   whichever end has more to show says so. */
.fm-tabwrap::before,.fm-tabwrap::after{content:"";position:absolute;top:0;bottom:1px;
  width:34px;pointer-events:none;opacity:0;transition:opacity .15s}
.fm-tabwrap::before{left:0;background:linear-gradient(to right,var(--card),transparent)}
.fm-tabwrap::after{right:0;background:linear-gradient(to left,var(--card),transparent)}
.fm-tabwrap.has-prev::before{opacity:1}
.fm-tabwrap.has-next::after{opacity:1}
.fm-pan:focus{outline:0}
.fm-tabs.is-ready .fm-pan{display:none}
.fm-tabs.is-ready .fm-pan.is-on{display:block}
/* The tab is the heading once the strip is up. */
.fm-tabs.is-ready .fm-pan>h2{display:none}
	/* The pair share a line box of their own: align-items centres the square on the
   number whatever type size the design sets, which vertical-align could only
   guess at. */
.fm-copyline{display:inline-flex;align-items:center;gap:8px}
.fm-copy{width:24px;height:24px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--cp-line,var(--line));border-radius:7px;background:transparent;
  color:var(--cp-ink,var(--mut));transition:.15s}
/* i.fa, not i: styles-bootstrap.css carries `.override .fa{line-height:inherit}`
   at (0,2,0) and would stretch the square. */
.fm-copy i.fa{font-size:11.5px;line-height:1}
.fm-copy:hover{border-color:var(--acc);color:var(--acc);
  background:rgba(var(--acc-rgb),.07)}
.fm-copy:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fm-copy.is-done{border-color:var(--acc);color:var(--acc);
  background:rgba(var(--acc-rgb),.14)}
	.fm-tabs{padding:0}
.fm-tabs.is-ready .fm-tabbar{padding:0 10px}
.fm-pan{padding:24px 26px}
.fm-pan+.fm-pan{border-top:1px solid var(--line)}
.fm-tabs.is-ready .fm-pan{border-top:0}
@media(max-width:700px){
  .fm-tabs.is-ready .fm-tabbar{padding:0 6px}
  .fm-tab{padding:14px 11px;font-size:14.5px}
  .fm-pan{padding:20px 18px}
}

/* ---- the page sections -------------------------------------------------- */
.fm-sec{background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:24px 26px;
  margin-bottom:20px;box-shadow:var(--lift)}
@media(max-width:700px){.fm-sec{padding:20px 18px;border-radius:12px}}
.fm-sec h2{font-size:21px;line-height:1.3;letter-spacing:-.015em;font-weight:700!important;
  margin:0 0 14px!important}
.fm-body{font-size:16px;color:var(--ink-2);line-height:1.75}
.fm-body h4{font-size:18px;font-weight:700!important;margin:24px 0 8px!important}
.fm-body p{margin:0 0 14px!important}
.fm-body ul,.fm-body ol{margin:0 0 15px!important;padding-left:20px}
.fm-body li{margin-bottom:6px}
.fm-body strong{color:var(--ink)}
.fm-body a{color:var(--acc);border-bottom:1px solid rgba(var(--acc-rgb),.4)}
/* Sellers paste tables with border="1" and inline widths. Neutralise them. */
.fm-body table{width:100%!important;border-collapse:collapse;margin:4px 0 16px;font-size:15px;border:0!important}
.fm-body table th,.fm-body table td{border:0!important;border-bottom:1px solid var(--line-2)!important;
  padding:10px 0!important;text-align:left;background:transparent!important;vertical-align:top}
.fm-body table th{font-weight:600;color:var(--mut);width:42%}
.fm-moreinfo{margin:12px 0 0!important;font-size:15px;color:var(--ink-2)}
.fm-moreinfo a{color:var(--acc);border-bottom:1px solid rgba(var(--acc-rgb),.4)}


.fm-bids-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Fixed layout with three equal columns (owner, 2026-09-08). Left to itself the
   table sized to its content, so "Bid From" got a third of the width it needed
   and the timestamp took half the table. */
.fm-bids{width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px;table-layout:fixed}
.fm-bids th,.fm-bids td{width:33.333%}
.fm-bids th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600;
  text-align:left;padding:10px 12px;background:var(--wash);white-space:nowrap}
.fm-bids td{padding:11px 12px;border-bottom:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.fm-bids tbody tr:last-child td{border-bottom:0}
/* The header cell needs two classes: `.fm-bids th{text-align:left}` above is
   (0,1,1) and outranks a bare .fm-bids__amt at (0,1,0). */
.fm-bids th.fm-bids__amt{text-align:right}
.fm-bids__amt{text-align:right;font-variant-numeric:tabular-nums}
.fm-bids td.fm-bids__amt{color:var(--ink);font-weight:700}
.fm-bids tr.is-top td{color:var(--acc);font-weight:700}
.fm-bids-empty{margin:0!important;color:var(--mut)}

/* ---- Bid History on a phone: one bid to a block, not three columns ----------
   (owner, 2026-09-22: "so that it shows in just 1 column rather than 3"). The
   table holds a min-width of 420px across three equal columns, and inside the
   card on a 390px phone the scroller it sits in is only 284px, so it overflowed
   sideways by 136px: the amount cell ran from x=333 to x=473 and collided with
   the timestamp beside it. Measured before the fix, not guessed at.

   Stacked, a bid reads top to bottom in the order somebody actually wants it:
   what it was for, when, and from where. The MARKUP is untouched - this is the
   same <table> the desktop gets, so sorting, paging and the realtime row
   updates all keep working, and there is one query and one renderer behind both.

   700px and not the 1000px the phone bar uses: at 768px the 420px table fits in
   its card with room over, and a tablet reading a three column table is not a
   problem anybody reported. 700 is already this card's narrow breakpoint (the
   tab bar and the panel padding both turn at it). */
@media(max-width:700px){
  .fm-bids-wrap{overflow-x:visible}
  .fm-bids{display:block;width:100%;min-width:0;table-layout:auto;font-size:15px}
  .fm-bids thead,.fm-bids tbody,.fm-bids tr,.fm-bids th,.fm-bids td{display:block;width:auto}

  /* The head stays, as a sort bar. A phone can lose the column labels - the
     figures below say what they are - but it must not lose the ability to put
     the newest or the highest bid first, which is the one thing this tab is
     for. "Bid From" carries no sort button, so it goes. */
  .fm-bids thead tr{display:flex;align-items:center;gap:20px;
    padding:9px 12px;border-radius:8px;background:var(--wash)}
  .fm-bids thead th{padding:0;background:none;white-space:nowrap}
  .fm-bids thead th:first-child{display:none}
  .fm-bids th.fm-bids__amt{text-align:left}
  .fm-bids th.fm-bids__amt .fm-bidsort{width:auto;justify-content:flex-start}

  .fm-bids tbody tr{display:flex;flex-direction:column;gap:3px;
    padding:13px 2px;border-bottom:1px solid var(--line-2)}
  .fm-bids tbody tr:last-child{border-bottom:0}
  .fm-bids tbody td{padding:0;border:0;white-space:normal}

  /* Amount first and large: it is what anybody scans a bid history for. The
     other two are context and take the muted size. */
  .fm-bids tbody td:nth-child(3){order:1;text-align:left;font-size:18px;line-height:1.25}
  .fm-bids tbody td:nth-child(2){order:2;font-size:13.5px;line-height:1.35;color:var(--mut)}
  .fm-bids tbody td:nth-child(1){order:3;font-size:13.5px;line-height:1.35;color:var(--mut)}

  /* The winning row is accent coloured across all three cells at full width,
     which stacked would be three green lines and no hierarchy. The figure keeps
     the accent and carries the meaning; its two context lines stay quiet. */
  .fm-bids tr.is-top td:nth-child(2),.fm-bids tr.is-top td:nth-child(1){
    color:var(--mut);font-weight:400}
  .fm-bidtop{margin-left:0;margin-top:4px}
}

/* ---- foot: paging, return, top ------------------------------------------ */
/* The whole cluster sits at the right edge under the page, paging first and the
   jump back to the top last. */
.fm-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;
  margin-top:6px;padding-top:24px}
.fm-foot__nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
/* On a phone the three buttons need the whole width, so the jump button drops to
   a line of its own - still hard right, which flex-end already does. */
@media(max-width:560px){.fm-foot__nav{width:100%}}
.fm-pager{display:flex;gap:12px}
/* The same mix as the Watch / Ask / My Notes tiles, pitched up (owner,
   2026-09-10: stand out more). It has to be: those tiles sit on a white card,
   these sit on the grey page, and the same 5% tint reads a shade fainter here.
   The edge is the full accent rather than a quarter of it - at 2.9:1 against
   this ground that is as much as the brand green gives - and the labels take
   full ink. */
.fm-pager__a{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;
  border:1px solid var(--acc);border-radius:10px;background:rgba(var(--acc-rgb),.1);
  font-size:14.5px;font-weight:600;color:var(--ink);transition:.15s}
.fm-pager__a i{color:var(--acc);transition:.15s}
.fm-pager__a:hover{background:rgba(var(--acc-rgb),.2);color:var(--ink);
  box-shadow:0 0 0 1px var(--acc)}
.fm-pager__a.is-off{opacity:.4;pointer-events:none}
/* 50px, the height the pills beside it come out at with their padding and
   border, so the row sits on one line. */
.fm-up{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;
  border:1px solid var(--acc);border-radius:10px;background:rgba(var(--acc-rgb),.1);
  color:var(--acc);cursor:pointer;transition:.15s}
.fm-up:hover{background:rgba(var(--acc-rgb),.2);color:var(--acc);
  box-shadow:0 0 0 1px var(--acc)}

/* ---- the rails ---------------------------------------------------------- */
.fm-rails{margin-top:34px}
.fm-rails h2{font-size:20px;font-weight:700!important;letter-spacing:-.015em;margin:0 0 15px!important}
.fm-railwrap{position:relative;margin-bottom:30px}
.fm-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;padding-bottom:6px}
.fm-rail::-webkit-scrollbar{display:none}
.fm-card2{flex:0 0 184px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line-2);
  border-radius:12px;overflow:hidden;transition:.15s;box-shadow:var(--lift)}
.fm-card2:hover{border-color:var(--line);box-shadow:var(--lift-2);transform:translateY(-2px)}
@media(max-width:700px){.fm-card2{flex:0 0 150px}}
.fm-card2__i{aspect-ratio:1/1;background:var(--wash);overflow:hidden}
.fm-card2__i img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.fm-card2:hover .fm-card2__i img{opacity:.88}
.fm-card2__b{padding:11px 13px 13px}
.fm-card2__n{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600}
.fm-card2__t{font-size:13.5px;line-height:1.42;margin-top:5px;color:var(--ink)}
.fm-card2__p{font-size:13.5px;color:var(--mut);margin-top:6px;font-variant-numeric:tabular-nums}
.fm-card2__p b{color:var(--ink);font-weight:700}
.fm-railnav{position:absolute;top:36%;transform:translateY(-50%);z-index:2;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.fm-railnav:hover{border-color:var(--ink);color:var(--ink)}
.fm-railnav--p{left:-14px}
.fm-railnav--n{right:-14px}
.fm-railnav.is-off{opacity:0;pointer-events:none}
.fm-railwrap.is-static .fm-railnav{display:none}
@media(max-width:820px){.fm-railnav{display:none}}

/* ---- the phone bar ------------------------------------------------------ */
.fm-bar{position:fixed;left:0;right:0;bottom:0;z-index:150;transform:translateY(115%);
  transition:transform .22s ease;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:none;gap:14px;align-items:center}
.fm-bar__l{min-width:0}
.fm-bar__lbl{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mut);font-weight:600;white-space:nowrap}
.fm-bar__l b{display:block;font-size:19px;line-height:1.15;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fm-bar__t{display:block;font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.fm-bar .fm-go{width:auto;flex:1;padding:13px 16px;font-size:15px;white-space:nowrap}
/* The bar's button when it carries the quantity maths as a second line. The
   padding comes down from 13px to 9px and the leading from the inherited 1.65
   to 1.2, which is arithmetic rather than taste: one line at 1.65 plus 26px of
   padding is the 51px the button already was, and two tightened lines plus 18px
   comes to the same 51px. The bar keeps its height, and `body.override`'s
   84px bottom padding keeps covering it. */
.fm-bar .fm-go:has(.fm-bar__go-x){line-height:1.2;padding-top:9px;padding-bottom:9px}
.fm-bar__go-t{display:block}
/* The bar's copy of the pro button (.is-1c, set by barMirror() whenever the
   panel's button is a pro one): dark, with its own "1-Click" pill, drawn as
   the button's last child and opening out at the far right only under the
   pointer, the way the panel's does. It spans both rows, so a two line label
   has it level with the middle of the pair. This button sizes itself to its
   content, which would put the open pill straight after the amount, so above
   a phone it gets a wider floor: at 270px "Bid $1,000.00" stands about 45px
   clear of it. */
.fm-bar .fm-go.is-1c{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  background:var(--lx-shell,#12161C);color:#fff;box-shadow:0 1px 2px rgba(16,19,23,.14)}
.fm-bar .fm-go.is-1c:hover{filter:none;background:var(--lx-shell-2,#1D242E);color:#fff;
  box-shadow:0 8px 20px -8px rgba(16,19,23,.55)}
.fm-bar .fm-go.is-1c>.fm-bar__go-t{grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fm-bar .fm-go.is-1c>.fm-bar__go-x{grid-area:2/1}
.fm-bar__go-1c{display:inline-flex;align-items:center;grid-area:1/2/3/3;max-width:0;margin-left:0;
  padding:1px 0;overflow:hidden;opacity:0;border-radius:999px;background:var(--acc);color:var(--acc-ink);
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;white-space:nowrap;
  transition:max-width .22s ease .04s,margin-left .22s ease .04s,padding .22s ease .04s,opacity .12s ease}
@media (hover:hover){
  .fm-bar .fm-go.is-1c:not(:disabled):hover>.fm-bar__go-1c{max-width:84px;margin-left:14px;padding:1px 7px;
    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}
}
.fm-bar .fm-go.is-1c:not(:disabled):focus-visible>.fm-bar__go-1c{max-width:84px;margin-left:14px;
  padding:1px 7px;opacity:1}
@media (prefers-reduced-motion:reduce){
  .fm-act .fm-go__1c,.fm-bar__go-1c,
  .fm-act .fm-go:hover>.fm-go__1c,.fm-bar .fm-go:hover>.fm-bar__go-1c{transition:none!important}
}
@media(min-width:601px){
  .fm-bar .fm-go.is-1c{min-width:270px}
}
.fm-bar__go-x{display:block;font-style:normal;font-size:11.5px;font-weight:600;opacity:.85;
  line-height:1.2;margin-top:1px;letter-spacing:normal}
@media(max-width:1000px){
  .fm-bar{display:flex}
  .fm-bar.is-up{transform:none}
  body.override{padding-bottom:84px}
}
/* A phone wants the button to take the whole width: there is nothing else to
   put there and a thumb should not have to aim. A tablet does not - at 768px
   the same rule gave the button 629px of a 768px bar, which the site owner read
   as a button that had lost its sense of scale (2026-09-16, "too wide ... must
   appear on the right side"). Above 600px it takes the DESKTOP arrangement
   instead, which already solved this: the price holds the left, the button sits
   at the right at a width it chooses. The bar itself stays where it is, pinned
   along the bottom - only the two things inside it swap roles. */
@media(min-width:601px) and (max-width:1000px){
  .fm-bar__l{flex:1 1 auto}
  .fm-bar .fm-go{flex:0 0 auto;width:auto;min-width:230px}
}
/* The panel is sticky only inside its own column, so once the reading starts it
   is gone. On a desktop the same bar comes back from the top instead, which is
   why there is never a stretch of this page with no way to bid. */
@media(min-width:1001px){
  .fm-bar{display:flex;top:var(--navh,70px);bottom:auto;transform:translateY(-130%);
    border-top:0;border-bottom:1px solid var(--line);
    padding:10px max(24px,calc((100% - 1320px) / 2))}
  .fm-bar.is-up{transform:none}
  .fm-bar__l{flex:1}
  .fm-bar .fm-go{flex:0 0 auto;width:auto;min-width:230px}
}
/* One countdown at a time: the bar's stands down whenever the panel's is up. */
.fm-bar.is-quiet .fm-bar__t{display:none}
@media(prefers-reduced-motion:reduce){.fm-bar{transition:none}}

/* ---- lightbox ----------------------------------------------------------- */
.fm-lb{position:fixed;inset:0;z-index:1100;background:rgba(10,11,13,.97);display:none;
  align-items:center;justify-content:center;padding:60px 24px}
.fm-lb.is-on{display:flex}
.fm-lb img,.fm-lb video{max-width:min(1200px,94vw);max-height:86vh;object-fit:contain}
.fm-lb__x{position:absolute;top:20px;right:24px;background:none;border:0;font-size:28px;cursor:pointer;
  color:rgba(255,255,255,.7);line-height:1}
.fm-lb__x:hover{color:#fff}
.fm-lb__n{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;font-size:26px;
  cursor:pointer;color:rgba(255,255,255,.6);padding:20px}
.fm-lb__n:hover{color:#fff}
.fm-lb__n--p{left:6px}.fm-lb__n--n{right:6px}
.fm-lb.is-plain .fm-lb__n,
.fm-lb.is-media .fm-lb__n{display:none}
/* A video or an embed: centred on the dark ground with nothing drawn around
   it, and free to use the width. It used to borrow the prose card, which put a
   white panel and 26px of padding around a video and let it scroll sideways
   out of a squared box (site owner, 2026-09-17). An embed brings its own
   width and height, so it is bounded rather than stretched. */
.fm-lb.is-media .fm-lb__body{display:flex;align-items:center;justify-content:center;
  background:none;padding:0;border-radius:0;overflow:visible;
  max-width:min(1200px,94vw);max-height:86vh}
.fm-lb.is-media iframe,
.fm-lb.is-media embed,
.fm-lb.is-media object{max-width:min(1200px,94vw);max-height:86vh;border:0}
/* A photograph fills the frame; anything else (the closing rules) is a
   readable card in the middle of it. Without the second rule the prose ran
   the full width of the screen on a near-black ground. */
.fm-lb__body{max-width:min(1200px,94vw);max-height:86vh;display:flex;
  align-items:center;justify-content:center}
.fm-lb.is-plain .fm-lb__body{display:block;max-width:min(760px,92vw);max-height:84vh;
  overflow-y:auto;background:var(--card);border-radius:14px;padding:26px;
  font-size:15.5px;color:var(--ink-2)}
/* The explainer's own close button does nothing in here, at any width. It is
   `data-dismiss="modal"` - written for Auctions.php, where this same markup sits
   inside a Bootstrap modal - and .fm-lb is not one, so Bootstrap finds no
   .modal ancestor and the click is swallowed. There are two of them, one per
   card, and both were dead. Hidden rather than rewritten because the function
   that draws them is shared with Auctions.php, SellersAuct.php, the two
   marketplace endpoints and the homepage, where they DO work. */
.fm-lb .acd-close{display:none}

/* ---- the closing rules, full screen on a phone (owner, 2026-09-18) ----
   This prose was reading through three nested boxes: 24px of backdrop padding,
   then 26px of lightbox card padding, then 18px of the explainer's own card
   padding. 68px of chrome each side of a 375px screen, which left the text 237px
   and made a long explainer longer. The explainer already brings a card - border,
   14px radius, 20px bottom margin - so in here that card IS the sheet and stops
   drawing a second one inside the first.
   Two cards arrive stacked, Accelerated Lot Closing and Dynamic Auction Closing,
   so they need a seam between them once their own borders and radii are gone.
   The seam is hung on the second WRAPPER, not on the second card: the two
   explainers are separate function calls and each returns its own `.acd-wrap`
   with one card inside it, so the cards are not siblings and never were. Each
   also returns its own copy of acd_popup_styles(), so there is a <style>
   element sitting between the two wrappers - which is why `+` does not reach
   the second one either, and `~` does. */
@media(max-width:700px){
  .fm-lb.is-plain{padding:0}
  .fm-lb.is-plain .fm-lb__body{max-width:none;max-height:none;align-self:stretch;
    flex:1 1 auto;border-radius:0;padding:0}
  .fm-lb.is-plain .acd-card{border:0;border-radius:0;margin-bottom:0}
  .fm-lb.is-plain .acd-wrap~.acd-wrap{border-top:9px solid #EEF1F5}
  .fm-lb.is-plain .acd-card-head{padding:15px 16px}
  .fm-lb.is-plain .acd-card-body{padding:16px}
  /* The one close that works. It has to carry its own ground now: there is no
     dark backdrop left behind it to be white against, and it passes over an
     amber head, a blue one and white prose as the sheet scrolls. */
  .fm-lb.is-plain .fm-lb__x{top:9px;right:9px;width:34px;height:34px;padding:0;
    display:flex;align-items:center;justify-content:center;border-radius:50%;
    background:rgba(255,255,255,.82);color:#3A4250;font-size:23px;z-index:3}
  .fm-lb.is-plain .fm-lb__x:hover{background:#fff;color:#12161C}
}

/* ---- the confirmation dialog -------------------------------------------- */
/* The dialog covers the whole window and never resizes itself.
   An earlier version measured window.visualViewport and shrank to fit above a
   phone's keyboard; the owner asked for the opposite (2026-09-17): stay full
   height and let the sheet be scrolled. That is also simpler and cannot leave
   a gap, because inset:0 on a fixed element is the window by definition and
   dlgLock() stops the document moving underneath it.
   `overscroll-behavior:contain` keeps a scroll that reaches the end of the
   sheet from carrying on into the lot behind it. */
.fm-modal{position:fixed;inset:0;z-index:1200;background:rgba(12,13,16,.55);display:none;padding:24px;
  overflow-y:auto;overscroll-behavior:contain}
/* The bid confirmation lives on <body> - it is moved there on mount so the
   phone drawer cannot trap it (§6.1 of the context doc) - which puts it
   outside .fm and everything .fm gives the lot page. It was rendering in the
   site's own Roboto, on the site's #231F20 ink, without antialiasing: its lot
   band, title, buttons and cost table were a different typeface from the
   lot page behind it and from the catalog card it opens over (owner,
   2026-09-30: "I just want one consistent design across the 3"). It takes
   .fm's face, ink and smoothing here and nothing else - sizes and leading
   stay the ones it was laid out with, so the dialog does not move. */
body.override .fm-modal{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
body.override .fm-modal :where(h1,h2,h3,h4,h5,h6){color:inherit!important;font-family:var(--sans)}
.fm-modal :where(input,button,select,textarea){font-family:var(--sans)}
.fm-modal.is-on{display:flex}
.fm-modal__box{background:var(--card);border:1px solid var(--line);border-radius:14px;width:100%;
  max-width:440px;box-shadow:0 30px 80px -30px rgba(0,0,0,.5);overflow:hidden;margin:auto;
  display:flex;flex-direction:column;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)}
/* The head is the title and the close button only; the lot moved into a block
   of its own below it, which is what lets the countdown chip sit flush with
   the dialog's right edge the way a card's does.

   It closes with its own hairline (owner, 2026-09-25), so the dialog opens as
   three plain bands - what you are doing, which lot, then the money. 16px of
   padding under the title against .fm-modal__lot's 16px above the plate, so
   the rule sits centred between the two rather than hung off the title. */
.fm-modal__head{display:flex;align-items:flex-start;gap:16px;padding:24px 26px 16px;
  border-bottom:1px solid var(--line-2)}
.fm-modal__head h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0!important}
.fm-modal__head p{margin:0!important;font-size:13.5px;color:var(--mut);line-height:1.55}
.fm-modal__lot{padding:16px 26px 20px;border-bottom:1px solid var(--line-2)}
/* The card's band, repeated. This one already had its own wrapper, so it IS
   the band with nothing moved. --band-h / --band-fs are declared here for the
   reason they are declared on .bd-lotline and .fm-clock: three surfaces show
   this pair and none of them may drift from the other two. */
.fm-modal__lotline{--band-h:34px;--band-fs:14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:var(--band-h);padding:0 11px;
  border-radius:9px;background:#EEF1FB;border:1px solid #D3DBF4}
.fm-modal__t{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  background:none;color:#1B33A3;
  font-size:var(--band-fs);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fm-modal__t .msy{font-size:1.07em;line-height:1}
/* The last 30 minutes and the last 2, in the washes the card's band and the
   lot panel's band take (.bd-lotline:has() in lotx-list.css, .fm-clock--live
   in lotx-shared.css). dlgClock() in scripts/lotx-item.js copies the state
   across from the ticking chip as data-urgency. */
.fm-modal__lotline[data-urgency="soon"]{background:var(--warn-bg);border-color:#F0DFB0}
.fm-modal__lotline[data-urgency="soon"] .fm-modal__t{color:var(--warn-ink)}
.fm-modal__lotline[data-urgency="now"]{background:var(--bad-bg);border-color:#F3D9CF}
.fm-modal__lotline[data-urgency="now"] .fm-modal__t{color:var(--bad-ink)}
.fm-modal__name{margin:12px 0 0;font-size:16px;line-height:1.4;color:var(--ink);font-weight:500}
.fm-modal__x{margin-left:auto;background:none;border:0;font-size:26px;line-height:1;color:var(--mut);
  cursor:pointer;padding:0 2px}
.fm-modal__x:hover{color:var(--ink)}
.fm-modal__body{padding:24px 26px 22px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}
.fm-modal__label{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut);font-weight:600;margin-bottom:9px}
.fm-modal__field{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;
  padding:0 16px;height:58px;background:var(--card)}
.fm-modal__field:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.16)}
.fm-modal__field span{font-size:20px;color:var(--mut)}
.fm-modal__field input{flex:1;border:0;outline:0;background:none;font-size:24px;font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;min-width:0}
.fm-modal__help{margin:10px 0 0!important;font-size:12.5px;color:var(--mut);line-height:1.6}
.fm-modal__sum{margin:18px 0 0!important;background:var(--wash);border-radius:11px;padding:6px 16px}
.fm-modal__sum>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--line-2)}
.fm-modal__sum>div:last-child{border-bottom:0}
.fm-modal__sum dt{font-size:13.5px;color:var(--mut)}
.fm-modal__sum dd{margin:0;font-size:14px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fm-modal__sum .is-total dt{color:var(--ink);font-weight:700;font-size:14.5px}
.fm-modal__sum .is-total dd{color:var(--acc);font-size:19px;font-weight:700}
.fm-modal__note{display:flex;gap:9px;margin:14px 0 0!important;font-size:12.5px;color:var(--mut);line-height:1.55}
.fm-modal__note i{color:var(--acc);margin-top:2px}
/* The Bid / Cancel row, which sits inside .fm-modal__body directly under the
   amount field (owner, 2026-09-28) rather than below the cost table. It takes
   the body's own side padding, so all it needs here is the space above it.

   .fm-modal__go on flex:1 plus Cancel at its natural width makes the row span
   the full content width, which is the field's width - the field, the button
   row and the cost table all end on the same vertical line. */
/* stretch, not center: Cancel below carries no vertical padding of its own and
   takes its height from this row, so the two controls cannot drift apart when
   either one's type or padding changes. */
.fm-modal__act{display:flex;align-items:stretch;gap:12px;margin-top:20px}
.fm-modal__go{flex:1;border:0;border-radius:10px;background:var(--acc);color:var(--acc-ink);font-size:15.5px;
  font-weight:700;padding:15px 20px;cursor:pointer;transition:.15s}
.fm-modal__go:hover{filter:brightness(1.06)}
/* dlgCalc() disables this whenever the amount is under the next bid, and now
   that the button sits right beside that error it has to look disabled too -
   a full-strength green button next to a red "not enough" line reads as a
   broken button rather than a refused amount. */
.fm-modal__go:disabled{opacity:.42;cursor:not-allowed;filter:none}
/* Cancel is a button, and it is red (owner, 2026-09-29: "make the Cancel larger
   in font, red in color and more obvious"). It was grey 14.5px text with no
   surface at all, which beside a filled green pill read as a caption rather
   than as the way out of the dialog.

   It takes the design's OWN alarm pair - --bad-bg / --bad-ink, the colours of
   the Outbid flag and the closed clock - rather than a new red, and an outline
   over a tinted ground rather than a fill. The filled button in this row is the
   one that commits money; two solid blocks side by side ask the reader to
   choose between two equals, which is not what this pair is. Same type size and
   weight as Bid now, so "larger" is measured against the thing next to it.

   No vertical padding: .fm-modal__act stretches it to Bid's height. */
.fm-modal__cancel{flex:0 0 auto;padding:0 26px;border-radius:10px;
  /* --bad-ink at about a third, which is a red edge on white and on the tint */
  border:1.5px solid rgba(168,52,28,.34);
  background:var(--bad-bg);color:var(--bad-ink);font-size:15.5px;font-weight:700;
  cursor:pointer;transition:background .15s,border-color .15s}
.fm-modal__cancel:hover{background:#FAE2D8;border-color:var(--bad-ink)}
.fm-modal__cancel:focus-visible{outline:2px solid var(--bad-ink);outline-offset:2px}
.fm-modal__demo{margin:0!important;padding:0 26px 22px;font-size:11.5px;color:var(--mut);text-align:center}
/* The dialog before its lot has arrived (owner, 2026-09-30: "show the popup
   immediately with a loading effect ... then load the bid details after").
   pending() in scripts/lotx-item.js puts it up on the card's press with the
   head, the band and the name already real, and these placeholders where the
   amount, the increments line, the note and the cost table will be, each at
   the height of the row that replaces it, so the box hardly moves when they
   are swapped. Between them is the real Bid / Cancel row: Cancel works from
   the first frame, and Bid says "Loading" behind a spinner - the one place the
   wait is put in words. The sheen is the lot skeleton's own (lx-sheen in
   lotx-shared.css). */
.fm-wait__sk{display:block;border-radius:6px;
  background:linear-gradient(100deg,#ececea 40%,#f5f5f3 50%,#ececea 60%);background-size:200% 100%;
  animation:lx-sheen 1.2s linear infinite}
/* Measured off the real body at 1728x887 (2026-09-30): label 24-40, field
   49-107, the increments line 117-157 (it wraps to two lines at this width),
   the Bid row 177-229, the note 243-264, the cost table 282-465 with four rows
   and 41px more with the Quantity row. Each bar sits on the middle of the line
   it stands for. The margin under a bar is the WHOLE gap to the next row, not
   the part left over, because it collapses with that row's own top margin
   (the Bid row's 20px, the table's 18px) and only the larger of the two is
   kept. Measured the same: the Bid row lands at 177 and the body ends at 487. */
.fm-wait__sk.is-label{width:38%;height:11px;margin:3px 0 11px}
.fm-wait__sk.is-field{height:58px;border-radius:10px}
.fm-wait__sk.is-help{width:88%;height:12px;margin-top:14px}
.fm-wait__sk.is-help2{width:46%;height:12px;margin:8px 0 24px}
.fm-wait__sk.is-note{width:62%;height:12px;margin:18px 0 23px}
.fm-wait__sk.is-sum{height:183px;border-radius:11px;margin-top:18px}
.fm-wait__sk.is-sum.is-qty{height:224px}
.fm-wait__go{display:inline-flex;align-items:center;justify-content:center;gap:10px}
/* Busy, not refused: the plain disabled look (.42) reads as "you cannot", and
   the spinner and the word need to be legible. */
.fm-modal__go.fm-wait__go:disabled{opacity:.8;cursor:progress}
.fm-wait__spin{flex:none;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.38);border-top-color:#fff;animation:fm-spin .7s linear infinite}
@keyframes fm-spin{to{transform:rotate(360deg)}}
/* Five seconds in (a timer, not an animation delay): the line is slow, and
   saying so is kinder than a spinner that says nothing new. */
.fm-wait__slow{margin:12px 0 0!important;font-size:12.5px;line-height:1.5;color:var(--warn-ink)}
/* The request did not come back: said in the dialog, with Try Again. */
.fm-wait__fail{text-align:center;padding:4px 0 0}
.fm-wait__fail .msy{font-size:34px;line-height:1;color:var(--bad-ink)}
body.override .fm-modal .fm-wait__fail h4{margin:8px 0 4px!important;font-size:17px;font-weight:700;
  color:var(--ink)!important}
.fm-wait__fail p{margin:0!important;font-size:13.5px;line-height:1.55;color:var(--mut)}
/* The real rows settle into the placeholders' places rather than snap. A
   transform only, from a position that is already fully drawn, so a frame
   that never ticks leaves it 5px low and legible, never invisible. */
.fm-modal__body.is-arrived{animation:fm-arrive .22s ease-out}
@keyframes fm-arrive{from{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){
  .fm-wait__sk{animation:none;background:#ececea}
  .fm-wait__spin{animation-duration:1.6s}
  .fm-modal__body.is-arrived{animation:none}
}
@media(max-height:760px){
  .fm-modal{padding:14px}
  .fm-modal__head{padding:18px 20px 15px}
  .fm-modal__body{padding:16px 20px 16px}
  .fm-modal__field{height:48px}
  .fm-modal__field input{font-size:21px}
  .fm-modal__help{margin-top:8px!important;font-size:12px}
  .fm-modal__sum{margin-top:13px!important;padding:2px 14px}
  .fm-modal__sum>div{padding:7px 0}
  .fm-modal__note{margin-top:11px!important}
  .fm-modal__act{margin-top:15px}
  /* The loading dialog's placeholders, kept on the tighter rows above.
     Measured at 1440x700: field 41-89, the increments line ONE line at 12px
     here (97-116), the Bid row 131-183, the note 194-215, the table 228-415
     with five rows and 36px less with four. */
  .fm-wait__sk.is-field{height:48px}
  .fm-wait__sk.is-help{margin:12px 0 18px}
  .fm-wait__sk.is-help2{display:none}
  .fm-wait__sk.is-note{margin:15px 0 18px}
  .fm-wait__sk.is-sum{height:151px}
  .fm-wait__sk.is-sum.is-qty{height:187px}
}
/* A short phone: the rows are the tight ones, but a 335px line wraps the
   increments sentence to two again. */
@media (max-height:760px) and (max-width:700px){
  .fm-wait__sk.is-help{margin-bottom:0}
  .fm-wait__sk.is-help2{display:block;margin:7px 0 18px}
}

/* ---- a phone gets a full-height SHEET, not a floating card ----
 * NOTE the query: this is max-WIDTH. The block above it is max-HEIGHT:760px,
 * for short windows, and putting these rules in there meant they never fired on
 * an ordinary 375x812 phone at all.
 *
 * The sheet fills the window and STAYS that size when the keyboard comes up:
 * the part the keyboard covers is reached by scrolling the sheet, which is the
 * whole point of a full-height one (owner, 2026-09-17). An earlier version
 * measured window.visualViewport and shrank to fit above the keyboard; that is
 * exactly what was asked to stop.
 *
 * .fm-modal scrolls as ONE piece - head, lot and body together - so the Bid row
 * can always be reached by scrolling even with the keyboard over it. The body
 * must therefore NOT trap the scroll itself. Since the row moved up next to the
 * amount field it is usually already above the keyboard, but the scroll room
 * below still has to exist for the cost table under it.
 *
 * min-height rather than height: the sheet is never shorter than the window, so
 * nothing behind it can show through, and it still grows when content is
 * taller. */
@media (max-width:700px){
  .fm-modal{padding:0}
  .fm-modal.is-on{display:block}
  /* min-height in VIEWPORT units, not 100%. A percentage resolves against the
     scroller's CONTENT box, so the moment :focus-within adds the padding below
     the sheet shrank to fit what was left - 596px on an 812 window - which is
     the opposite of staying full height. dvh is the window itself and ignores
     the padding entirely. */
  .fm-modal__box{max-width:none;width:100%;margin:0;border:0;border-radius:0;
    box-shadow:none;max-height:none;overflow:visible;
    min-height:100vh;min-height:100dvh}
  .fm-modal__body{overflow:visible}

  /* Room to scroll the keyboard out of the way, WITHOUT resizing the sheet.
   *
   * A phone does not shrink the layout viewport when its keyboard opens - only
   * the visible part of it - so a sheet that is exactly one window tall has
   * nothing to overflow and therefore nothing to scroll, and the Bid button
   * under the keyboard could not be reached however hard you pulled.
   *
   * `:focus-within` is true exactly while a field in the sheet has the caret,
   * which is exactly while the keyboard is up, so the scroll room appears and
   * disappears with it and there is no listener to keep in step. The SHEET is
   * untouched at min-height:100% - this is padding under it, inside the
   * scroller. 55vh is an iOS keyboard plus its autofill bar, with room to
   * spare; overscrolling into a little dark space is harmless. */
  .fm-modal:focus-within{padding-bottom:55vh}
}
.fm-pro{display:flex;align-items:flex-start;gap:10px;margin-top:14px;cursor:pointer;
  font-weight:400;-webkit-user-select:none;user-select:none}
.fm-pro input{position:absolute;opacity:0;width:0;height:0}
.fm-pro__box{flex:0 0 auto;width:16px;height:16px;margin-top:1px;border-radius:4px;
  background:transparent;border:1.5px solid var(--mut);display:flex;align-items:center;
  justify-content:center;transition:.14s}
.fm-pro__box i{font-size:9px;color:var(--acc-ink);opacity:0;transition:.14s}
.fm-pro:hover .fm-pro__box{border-color:var(--ink)}
.fm-pro input:focus-visible~.fm-pro__box{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.35)}
.fm-pro input:checked~.fm-pro__box{background:var(--acc);border-color:var(--acc)}
.fm-pro input:checked~.fm-pro__box i{opacity:1}
.fm-pro__t{font-size:13px;line-height:1.5;color:var(--ink-2);font-weight:500}
	/* An outlined button the width of the one above it. As a plain text link this
   was missed (the owner called it out on 2026-09-09): a second amount to type
   is a real choice, not a footnote, so it takes a real control. Still hollow,
   so the solid one stays the primary. The edge is drawn on --mut rather than
   the hairline colour for the same reason the pro checkbox is: the wash fill
   is barely a tone off the card, so the border is what says "control" and it
   has to carry 3:1 of its own. The --mb-* hooks are how a design that sits on
   a photograph swaps the ink without a second copy of these rules. */
/* Adjust Max Bid is drawn from these rules too (owner, 2026-09-23: same look as
   "or Enter a Max Bid"). The two are ALTERNATES in one slot - the adjust button
   shows for the top bidder and this one for everybody else, and the realtime
   handler swaps them when the winner changes - so one definition rather than two
   that drift. The comment further down about "whichever of the two second
   controls is the visible one" was already saying they are the same control.

   Scoped through .single-item-enter-max-bid because .fm-go2 on its own is also
   the pro one-click button (scripts/lotx-item.js builds it), which is green and
   must not follow this. That wrapper is how the JS and the spacing rules already
   address it. */
.fm-maxbid,
.single-item-enter-max-bid .fm-go2{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  margin:10px 0 0;padding:12px 16px;cursor:pointer;transition:.15s;
  border:1px solid var(--mb-line,var(--mut));border-radius:var(--mb-r,10px);
  background:var(--mb-bg,var(--wash));font-size:14.5px;color:var(--mb-mut,var(--mut))}
.fm-maxbid span,
.single-item-enter-max-bid .fm-go2 span{color:var(--mb-ink,var(--ink));font-weight:600;transition:.15s}
.fm-maxbid:hover,
.single-item-enter-max-bid .fm-go2:hover{border-color:var(--mb-line-h,var(--acc));
  background:var(--mb-bg-h,rgba(var(--acc-rgb),.06))}
.fm-maxbid:hover span,
.single-item-enter-max-bid .fm-go2:hover span{color:var(--mb-ink-h,var(--acc))}
.fm-maxbid:focus-visible,
.single-item-enter-max-bid .fm-go2:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* The current maximum is the quiet half of the label, the way "or" is on the
   other button, so it opts out of the inked span treatment in both states. */
.single-item-enter-max-bid .fm-go2 .fm-go2__v,
.single-item-enter-max-bid .fm-go2:hover .fm-go2__v{color:var(--mb-mut,var(--mut));font-weight:400}
/* "Bid instantly" is a setting for the button above it, not for this one, so it
   sits closer to the one it changes and further from the one it does not. */
.fm-pro+.fm-maxbid{margin-top:24px}
	/* Increment and premium, under the two bid buttons. A tinted block rather than
   two more loose lines: the cluster above it is already three stacked shapes,
   and this is a footnote to them, not a fourth. */
/* .fm-act .fm-terms, not .fm-terms: the page reset carries `.fm dl{margin:0}`
   at (0,1,1), so a single class loses and the block sat flush against the
   button above it. */
.fm-act .fm-terms{margin:16px 0 0;padding:4px 14px;background:var(--wash);border-radius:10px}
.fm-terms>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--line-2)}
.fm-terms>div:last-child{border-bottom:0}
.fm-terms dt{font-size:13px;color:var(--mut)}
.fm-terms dd{margin:0;font-size:13.5px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
/* Same box as .fm-go: its padding less the 1px this one spends on a border,
   and the same type size, so the two read as a pair. */
.fm-maxbid,
.single-item-enter-max-bid .fm-go2{padding:15px 22px;font-size:16.5px}


/* Accordion prose (terms / closing rules), from the same design. */

	.acd-wrap{ color:#2d3748; font-size:15px; line-height:1.6; }
	.acd-wrap *{ box-sizing:border-box; }
	.acd-card{ border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; margin-bottom:20px; background:#fff; }
	.acd-card:last-child{ margin-bottom:0; }
	.acd-card-head{ display:flex; align-items:center; gap:14px; padding:16px 18px; }
	.acd-card-head .acd-ico{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; }
	.acd-card-head .acd-titles{ flex:1 1 auto; min-width:0; }
	.acd-card-head h4{ margin:0; font-size:18px; font-weight:800; color:#1a202c; }
	.acd-card-head .acd-sub{ margin:2px 0 0; font-size:12.5px; color:#718096; font-weight:600; letter-spacing:.02em; }
	.acd-card-head .acd-close{ flex:0 0 auto; margin:-4px -4px 0 8px; align-self:flex-start; background:transparent; border:0; padding:0 4px; font-size:28px; line-height:.8; color:#4a5568; opacity:.5; cursor:pointer; -webkit-appearance:none; }
	.acd-card-head .acd-close:hover, .acd-card-head .acd-close:focus{ opacity:1; color:#1a202c; outline:none; }
	.acd-card-body{ padding:18px; }
	.acd-lead{ font-size:15.5px; margin:0 0 14px; }
	.acd-lead strong{ color:#1a202c; }
	/* Dynamic Auction Closing accents (blue) */
	.acd-dac .acd-ico{ background:#3182ce; }
	.acd-dac .acd-card-head{ background:#ebf3fb; border-bottom:1px solid #d6e6f7; }
	/* Accelerated Lot Closing accents (amber) */
	.acd-alc .acd-ico{ background:#dd8a1a; }
	.acd-alc .acd-card-head{ background:#fdf3e2; border-bottom:1px solid #f4e2be; }
	/* Stage steps (DAC) */
	.acd-stages{ display:flex; flex-wrap:wrap; gap:12px; margin:6px 0 4px; }
	.acd-stage{ flex:1 1 150px; min-width:150px; border:1px solid #e2e8f0; border-radius:12px; padding:14px; background:#f8fafc; }
	.acd-stage .acd-stage-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
	.acd-stage .acd-stage-no{ display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#3182ce; background:#e6f0fb; border-radius:20px; padding:3px 10px; }
	.acd-stage .acd-stage-time{ font-size:13.5px; font-weight:800; color:#2b6cb0; white-space:nowrap; }
	.acd-stage p{ margin:0; font-size:14px; }
	.acd-stage .acd-big{ font-size:15px; font-weight:700; color:#1a202c; }
	.acd-note{ display:flex; gap:10px; align-items:flex-start; background:#f7fafc; border-radius:10px; padding:11px 14px; margin-top:14px; font-size:13.5px; color:#4a5568; }
	.acd-note .fa{ color:#718096; margin-top:2px; }
	.acd-off{ background:#f7fafc; border:1px dashed #cbd5e0; border-radius:12px; padding:16px; font-size:15px; color:#4a5568; margin:4px 0; }
	/* ALC schedule */
	.acd-sched{ margin:4px 0 0; }
	.acd-sched-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; padding:12px 0; border-top:1px dashed #e2e8f0; }
	.acd-sched-row:first-child{ border-top:0; }
	.acd-sched-when{ flex:0 0 100%; font-weight:700; color:#1a202c; font-size:14px; }
	.acd-sched-when small{ display:block; font-weight:600; color:#718096; font-size:12.5px; margin-top:1px; }
	.acd-chip{ display:inline-block; background:#fdf3e2; border:1px solid #f4e2be; color:#8a5a12; border-radius:7px; padding:3px 9px; font-size:12.5px; font-weight:600; margin:2px 0; }
	.acd-tip{ display:flex; gap:12px; align-items:flex-start; background:#fffaf0; border:1px solid #f4e2be; border-radius:12px; padding:14px 16px; margin-top:6px; }
	.acd-tip .fa{ color:#dd8a1a; font-size:16px; margin-top:2px; }
	.acd-tip p{ margin:0 0 6px; font-size:14px; }
	.acd-tip p:last-child{ margin-bottom:0; }
	@media (max-width:600px){
		.acd-stage{ flex:1 1 100%; }
	}