/* Phone layouts share desktop content and actions. Keep this after app.css. */
.mobile-nav, .mobile-new-search { display: none; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  html.phone-view .hdr { padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
  html.phone-view .hdr { border-bottom: 1px solid var(--fill); } /* 17 October 2026 (Carl: "Add small dividing line between under header on mobile grey"): the hairline app.css's phone block took off, in the app's grey (--fill, which dark redefines) */
  /* 16 October 2026 (Carl: "On mobile search calendar and watchlist should be icons at the bottom rather than the top"): the three views are an
     icon bar under the page (it follows the view in index.html). Its hairline and the current view's 2px marker are on top; it keeps the phone's
     home-indicator inset, so the page above it (the pane, the composer, the toast) no longer needs to. */
  .mobile-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); flex: none; padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left)); gap: 8px; border-top: 1px solid rgba(32,30,29,.12); background: var(--desk); }
  .mobile-nav button { display: grid; place-items: center; min-height: 52px; border: 0; border-top: 2px solid transparent; background: transparent; color: var(--muted); }
  .mobile-nav button.on { border-top-color: var(--blue); background: var(--tint); color: var(--blue); } /* 16 October 2026 (Carl: "Current tab should be tinted with accent color on mobile"): the current view's cell wears the blue wash (--tint, dark mode's own in theme-dark.css) */
  .main { overflow: hidden; }
  .view-mount { min-width: 0; }
  .pane { padding: 16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
  .pane, .thread { overscroll-behavior-y: contain; scroll-padding-block: 16px; }
  input, textarea, select, .composer input { font-size: 16px !important; }
  .view-head { flex-wrap: wrap; gap: 10px; }
  .view-head h2 { font-size: 26px; }
  .view-head .sub { min-width: 0; flex-wrap: wrap; }
  .wl-view { display: none; } /* One readable card layout on phones. */
  .wl-sortbar, .sr-head .sr-sortbar { flex: 1 1 100%; margin: 0; order: 3; }
  .wl-ctl { max-width: 100%; }
  .wl-ctl select { max-width: 100%; min-height: 44px; }
  /* 16 October 2026 (Carl, Search's Sort on a phone: "font sizes are not proportional"): the 16px above (no zoom on focus) made the field's words
     bold 16px beside an 11.5px "Sort" and cut the longer orders in the desktop's fixed 176px. The word steps up, the field's weight steps down,
     and the field takes the width of its longest order. */
  .wl-ctl-k { font-size: 13px; }
  .wl-ctl select { font-weight: 400; } /* as the Watchlist's own head already draws its selects here */
  .wl-ctl-sort select { width: auto; }
  .wl-content-tabs { margin-top: 0; }
  .wl-lot-tools label, .wl-session-tools label { min-width: 0; }
  .wl-session-tools input, .wl-session-tools select { min-height: 44px; width: 100%; }
  .wl-week-days { grid-template-columns: repeat(7,minmax(100px,1fr)); overflow-x: auto; }
  .wl-week-day { min-width: 0; }
  .wl-week-tools { gap: 8px; }
  .wl-week-tools button, .wl-week-tools a { min-height: 44px; }
  .wl-lists { flex-wrap: wrap; }
  .wl-tool, .wl-name, .wl-list { min-height: 44px; }
  .wl-session-summary { gap: 12px; }
  .wl-session-actions { flex-wrap: wrap; gap: 8px; }
  .wl-session-name { overflow-wrap: anywhere; }
  .c-wl-table[data-view], .sr-table.c-wl-table[data-view] { display: block; container-type: normal; }
  .c-wl-table[data-view] .c-wl-row, .sr-table.c-wl-table[data-view] .c-wl-row { display: flex; flex-direction: column; gap: 12px; padding: 16px; --wl-stage-h: 180px; --wl-gal: 100%; }
  .c-wl-table[data-view] :is(.c-wl-main,.c-wl-text) { display: contents; }
  .c-wl-table[data-view] :is(.c-wl-gal,.c-wl-title,.c-wl-meta,.c-wl-figures,.c-wl-actions,.c-wl-tools,.expand) { width: 100%; min-width: 0; margin-top: 0; }
  .c-wl-table[data-view] .c-wl-title { font-size: 26px; text-wrap: pretty; }
  .c-wl-table[data-view] .c-wl-figures { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .c-wl-table[data-view] .c-wl-actions { order: 1; padding: 0; gap: 8px; }
  .c-wl-table[data-view] .c-wl-tools { order: 2; position: static; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .c-wl-table[data-view] .expand { order: 3; padding: 16px 0; }
  .c-wl-table[data-view] :is(.save-mark,.c-wl-more,.c-btn,.c-ceil,.lr-open,.wl-pick select,.c-val-edit input,.c-ceil-edit input) { min-width: 44px; min-height: 44px; height: auto; }
  .c-wl-table[data-view] .wlg { width: 100%; grid-template-columns: minmax(0,1fr) 44px; }
  .c-wl-table[data-view] .wlg.none { grid-template-columns: 1fr; }
  .c-wl-table[data-view] .wlg-stage { width: 100%; }
  .c-wl-table[data-view] .wlg-th { min-height: 32px; }
  .c-wl-table[data-view] .wlg-nav { opacity: 1; width: 44px; height: 44px; }
  .chat { min-width: 0; }
  .thread { padding: 16px; gap: 16px; }
  .first-run { justify-content: safe center; padding-block: 12px; } /* 16 October 2026 (Carl, a phone screenshot: "Too much white space on bottom below main stuff"): centred between the header and the search bar, as on a desktop, where it was pinned to the top with 225px empty under it on a 390x844 phone; "safe" keeps the top in reach when there is no room (a short phone, the keyboard up) */
  .first-run h1 { font-size: 32px; }
  .first-run .starters { width: 100%; }
  .first-run .starter:nth-child(n+4) { display: none; }
  /* 16 October 2026 (Carl, a phone screenshot of a reply: "There should be the user's animated avatar here as well ... On mobile"): the mark
     stays beside the reply, as on a wide screen, with a narrower gap; the room under it (.ava-gap) keeps later lines in line with the words */
  .chat .msg { gap: 10px; min-width: 0; }
  .chat .msg > :not(.ava,.ava-gap) { min-width: 0; max-width: 100%; flex: 1; }
  .sr-head { flex-wrap: wrap; gap: 10px; }
  .composer-wrap, .composer-wrap.no-guide { padding: 8px 16px 12px; background: var(--desk); } /* the bar under it keeps the home-indicator inset */
  /* 19 October 2026 (Carl: "New search has less margin and padding than the two on the left"): a chip in the tool-chips row, at the right end,
     with .tchip's frame and padding, in place of a button laid over the bar's corner. Then (Carl: "the same width as the buttons above it. The speech
     and the send ... a plus icon before the text"): as wide as the mic and Send with the row's 6px gap (44 + 6 + 44), a plus before the words; 6px padding so the plus and the words fit that width */
  .mobile-new-search { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 94px; margin-left: auto; min-height: 44px; padding: 0 6px; border: 1px solid rgba(32,30,29,.16); border-radius: var(--r1); background: #fff; color: var(--muted); font: 500 11.5px/1 var(--sans); white-space: nowrap; }
  .composer { padding: 10px; }
  .composer-top, .composer-wrap .su-line-bar { display: none; }
  /* 19 October 2026 (Carl: "The new chat message has been deleted from the mobile search ... should be below the dictation button and the send button"):
     it was hidden on the empty start screen (.first-run); it now shows there too, so it is always in the same place under the mic and Send */
  .first-run .starters { grid-template-columns: minmax(0,1fr); }
  .composer-top:empty { display: none; }
  .composer-row { gap: 6px; }
  .send, .mic, .tchip { min-width: 44px; min-height: 44px; } /* 19 October 2026 (Carl: "the send button and the microphone button are different sizes"): the mic is .mic (speech.js), not .speech-btn */
  .tool-chips { flex-wrap: wrap; gap: 8px; }
  .wi-tabs { gap: 4px; }
  .wi-tabs button { min-height: 44px; padding-inline: 8px; }
  .wi-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .wi-layout > .wi-story { display: block; }
  /* 16 October 2026 (Carl, About this watch on a phone: "all 3 default images ... should be in one row, with smaller images that take up all 3
     squares"): three equal square tiles in one row, each photo filling its square (cropped to it) rather than shrinking inside a padded box. */
  .wi-images { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .wi-images figure { min-width: 0; margin: 0; }
  .wi-images img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
  .wi-facts { min-width: 0; }
  .alert-form.ap-panel { max-width: 100%; }
  #toast { max-width: calc(100vw - 32px); bottom: calc(70px + env(safe-area-inset-bottom)); } /* over the icon bar (52px and its edges), never on it */
}
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .c-wl-table[data-view] .c-wl-sales { order: 3; width: 100%; min-width: 0; }
  .c-wl-table[data-view] .wlg { grid-template-columns: minmax(0,1fr); }
  .c-wl-table[data-view] .wlg-strip { display: none; } /* Swipe or use the large previous / next buttons. */
}
/* Watchlist: let each control and date heading own its line. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  #watchlist .wl-week { margin-block: 16px 24px; }
  #watchlist .wl-week-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; padding: 8px 12px; }
  #watchlist .wl-week-nav { flex: 1 0 100%; justify-content: space-between; gap: 6px; }
  #watchlist .wl-week-nav > span { flex: 1; text-align: center; }
  #watchlist .wl-week-tools > a { margin-left: 0; display: inline-flex; align-items: center; }
  #watchlist .wl-week-tools > [data-act="wl-week-toggle"] { margin-left: auto; }
  #watchlist .wl-week-days { grid-template-columns: repeat(7,minmax(148px,1fr)); }
  #watchlist .wl-week.collapsed .wl-week-days { grid-template-columns: repeat(7,minmax(84px,1fr)); }
  #watchlist .wl-week-datebar { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; gap: 4px; padding: 8px; margin-bottom: 0; }
  #watchlist .wl-week-date { flex-wrap: wrap; justify-content: flex-start; gap: 4px 8px; min-height: 44px; }
  #watchlist .wl-week-date em { flex-basis: 100%; margin-left: 0; font-size: 11px; }
  #watchlist .wl-week-more { justify-self: start; min-height: 32px; padding: 4px 0; }
  #watchlist .wl-week-events { max-height: 220px; }
  #watchlist .wl-week-event { min-height: 54px; align-items: start; padding-block: 8px; }
  #watchlist .wl-week-event time { display: block; margin-bottom: 4px; }
  #watchlist .wl-week-event small { padding-top: 2px; }
  #watchlist .view-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px 12px; margin-bottom: 16px; }
  #watchlist .view-head .sub:empty { display: none; }
  #watchlist .view-head h2 { font-size: 26px; }
  #watchlist .view-head > [data-act="wl-reload"] { grid-column: 2; grid-row: 1; min-height: 44px; }
  #watchlist .view-head .wl-sortbar { grid-column: 1 / -1; margin: 0; }
  #watchlist .wl-ctl-sort { display: grid; grid-template-columns: 36px minmax(0,1fr); width: 100%; height: auto; }
  #watchlist .wl-ctl-sort select { width: 100%; min-width: 0; font-weight: 400; }
  #watchlist .wl-lot-tools { margin-bottom: 16px; }
  #watchlist .wl-listbar { margin: 0 0 16px; }
  #watchlist .wl-chips { height: auto; min-height: 44px; padding: 0; overflow: visible; white-space: normal; flex-wrap: wrap; gap: 12px; }
  #watchlist .wl-ctl-list { flex: 1 1 200px; height: auto; display: grid; grid-template-columns: 36px minmax(0,1fr); }
  #watchlist .wl-ctl-list select { width: 100%; min-width: 0; max-width: none; font-weight: 400; }
  #watchlist .wl-new { min-height: 44px; border-style: solid; padding-inline: 12px; }
}
/* Price summaries and actions: equal spacing, no overlapping icon targets. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .c-wl-table[data-view] .c-wl-figures > :is(.c-wl-bid,.c-wl-value) { padding: 12px; gap: 4px; --cell-x: 12px; --cell-b: 12px; }
  .c-wl-table[data-view] .c-fig-k { font-size: 9px; line-height: 1.4; letter-spacing: .08em; }
  .c-wl-table[data-view] .c-wl-left { margin-top: 12px; padding-top: 10px; }
  .c-wl-table[data-view] .c-wl-left b { font-size: 15px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
  .c-wl-table[data-view] .c-wl-margin { gap: 6px; margin-top: 12px; padding-top: 10px; }
  .c-wl-table[data-view] .c-wl-margin .lc-pill { max-width: 100%; white-space: normal; line-height: 1.4; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions { display: grid; grid-template-columns: 44px 44px minmax(0,1fr); gap: 8px; align-items: stretch; padding: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-actions > :is(.sr-watch,.ap-btn) { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-actions > .sr-source { grid-column: 3; min-height: 44px; margin: 0; padding: 8px 12px; justify-content: center; font-size: 13px; line-height: 1.3; white-space: normal; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-actions > .c-wl-more { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin: 4px 0 0; padding: 10px 0; border: 0; border-top: 1px solid var(--wlc-hair, var(--fill)); background: transparent; font-size: 13px; line-height: 1.3; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-actions > .c-wl-more::after { content: ""; }
}
/* Compact phone rows: thumbnail beside the name, then a short ledger and action strip. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row,
  .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row {
    display: grid; grid-template-columns: 88px minmax(0,1fr);
    grid-template-rows: auto auto auto; gap: 8px 12px; padding: 10px; --wl-stage-h: 72px; --wl-gal: 88px; --wl-ledger-h: 0px;
  }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-gal { grid-column: 1; grid-row: 1; width: 88px; align-self: start; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-text { display: block; grid-column: 2; grid-row: 1; min-width: 0; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-title { min-height: 0; font-size: 18px; line-height: 1.12; -webkit-line-clamp: 2; text-wrap: pretty; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-meta,
  .c-wl-table[data-view]:where(.sr-table) .sr-sub { margin-top: 3px; font-size: 11px; line-height: 1.3; }
  .c-wl-table[data-view]:where(.sr-table) .sr-pills { min-height: 14px; margin-bottom: 3px; gap: 3px 5px; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-when { min-height: 16px; margin-bottom: 4px; font-size: 10px; }
  .c-wl-table[data-view]:where(.sr-table) .wlg { height: 72px; }
  .c-wl-table[data-view]:where(.sr-table) .wlg-nav { width: 32px; height: 44px; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-figures { grid-column: 1 / -1; grid-row: 2; margin: 0; min-height: 0; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-figures > :is(.c-wl-bid,.c-wl-value) { min-height: 0; padding: 8px; gap: 3px; --cell-x: 8px; --cell-b: 8px; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-left,
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-margin { margin-top: 5px; padding-top: 5px; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-actions { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-tools { grid-column: 1 / -1; grid-row: 4; }
  .c-wl-table[data-view]:where(.sr-table) .expand,
  .c-wl-table[data-view]:where(.sr-table) > .c-wl-row > .c-wl-sales { grid-column: 1 / -1; grid-row: 5; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-actions { grid-template-columns: 44px 44px minmax(0,1fr) auto; gap: 4px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-actions > .sr-source { padding: 6px; font-size: 11px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-actions > .c-wl-more { grid-column: 4; margin: 0; padding: 6px; border: 0; font-size: 11px; }
}
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .sr-pills { flex-wrap: nowrap; overflow: hidden; height: 18px; min-height: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .sr-pills > * { flex-shrink: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-left,
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-margin { margin-top: 5px; padding-top: 5px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .sr-bid-n,
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .sr-value-n { font-size: 10px; line-height: 1.2; }
  .chat .composer-wrap { position: relative; }
  .chat .composer :is(.tchip,.tool-chips button) { min-height: 32px; font-size: 11px; }
}
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-figures > .c-wl-value { min-height: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-fig-n { font-size: 10px; line-height: 1.2; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .sr-sub { display: none; }
  .chat .thread { gap: 8px; padding-block: 10px; }
  .chat .sr-head { margin-block: 24px 8px; } /* 16 October 2026 (Carl, a phone screenshot of Sort between "Watch for one" and the first card: "More padding here"): 14px over Sort, 16px under it, from 4 and 8. Then (Carl, 19:31: "group the sort closer to the actual results"): 24px over it, apart from the words, and 8px under it, with the cards */
  /* 17 October 2026 (Carl: "on the mobile version the cards in search should have a small gap between them right now there's none"): the results were one
     framed box split by hairlines; each card became its own framed card, 8px from the next. Later that day (Carl: "Make it so the list has no gap as we
     added before, but instead just alternates off white white as other elements across the page"): one framed list again, no gap and no hairlines,
     every second card in the app's one off-white (--row-alt, as the Watchlist, the Calendar's ledger and the alerts). Then (Carl: "Reintroduce the small
     gap and shadow"): the 8px gap and each card framed again, lifted by the Watchlist tiles' shadow (--tile-shadow), the off-white kept. Then (Carl, 18:56,
     a screenshot: "the off white alternating same color as background. fix"): every card white (--desk), no alternation; hover and open keep their wash */
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] { display: flex; flex-direction: column; gap: 8px; border: 0; border-radius: 0; background: none; overflow: visible; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row { border: 1px solid var(--wlc-hair, rgba(32,30,29,.1)); border-radius: var(--r1); box-shadow: var(--tile-shadow); overflow: hidden; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open,:hover) { background: var(--desk); }
}
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .sr-pills { display: none; } /* 16 October 2026 (Carl, the rank, "checked … ago", the lot code and NEAREST on an opened card: "All this shouldn't show on clicking mobile search"): not on an open card either */
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-figures > :is(.c-wl-bid,.c-wl-value) { gap: 0; padding: 6px 8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-figures .c-fig-n { margin-block: 2px 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-figures .sr-bid-n { margin-bottom: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-margin { margin-bottom: 0; padding: 4px 0 0; gap: 4px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-text { align-self: start; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row { row-gap: 6px; }
}
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row,
  .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row { grid-template-columns: 72px minmax(0,1fr); padding: 8px; --wl-stage-h: 60px; --wl-gal: 72px; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-gal { width: 72px; }
  .c-wl-table[data-view]:where(.sr-table) .wlg { height: 60px; }
  .chat .composer .tool-chips { margin-top: 4px; padding-top: 4px; }
}
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  /* 16 October 2026: Search's replies have no mark now (app.css), so the result rows already have the full phone width: the -36px pull under
     the mark that this held is gone. */
}
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .chat .composer { padding: 6px; }
  .chat .composer input { padding-left: 10px; } /* 17 October 2026 (Carl: "Margin not good here with text"): the words start in line with the chips' labels, not 7px off the edge */
  .chat .thread { padding-top: 6px; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-when { top: 4px; left: 4px; max-width: calc(100% - 8px); padding: 3px 4px; gap: 3px; white-space: nowrap; font-size: 9px; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-when svg { width: 10px; height: 10px; }
  .c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-when .src { display: none; }
}
/* Search's sort is a compact secondary control above the result rows. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .chat .sr-head .wl-ctl-sort { height: 34px; gap: 8px; }
  .chat .sr-head .wl-ctl-k { font-size: 12px; font-weight: 500; }
  .chat .sr-head .wl-ctl-sort select { width: 180px; max-width: 100%; height: 34px; min-height: 34px; padding: 0 28px 0 9px; font-size: 13px !important; font-weight: 400; border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
}
/* 16 October 2026 (Carl, a phone screenshot of a Search card: "For this mobile view the alert and save buttons should be in top right and the two buttons
   on bottom open source and more info should be split 50/50 along bottom"). Save and the bell leave the strip for the card's top-right corner, the bell
   outermost, 36px squares whose touch area is 44px (the bell's own .ap-btn::after in app.css; Save's ::before, its ::after being the save sparkle); the strip is Open source and More Info,
   half each, alike as buttons. The strip is no size container on a phone (app.css makes it one beside the bell, which would hold the corner buttons
   inside it). The name, the facts and the pills keep clear of the corner. Kept at the end: it outranks the compact rows above by coming after them. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row { position: relative; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-text { padding-right: 98px; } /* (Carl, a screenshot: "ensure adequate padding here against the icons on right") the icons reach 88px in from the card's edge and the text column starts 10px in, so 98px keeps every word at least 16px off Save */
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-actions { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; container-type: normal; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn) { position: absolute; top: 10px; z-index: 2; width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-actions > .sr-watch { right: 52px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-actions > .ap-btn { right: 10px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-actions > .sr-watch::before { content: ""; position: absolute; inset: -4px; } /* ::before: the save sparkle is its ::after */
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-actions > :is(.sr-source,.c-wl-more) { grid-column: auto; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; margin: 0; padding: 8px 10px; border: 1px solid var(--wlc-edge, rgba(32,30,29,.2)); border-radius: var(--r1); background: var(--desk); font-size: 12px; line-height: 1.2; white-space: nowrap; }
}
/* 16 October 2026 (Carl: "median of 1 sale · 24 months cut that on mobile"): the comparable value's basis line (views/chat.js .sr-median) is left out
   on a phone; the figure and its "i" stay, and the "Not available" reasons, which are the only thing said there, stay too. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table .c-wl-value .sr-median { display: none; }
}
/* 16 October 2026 (Carl, a phone screenshot of "18 bids" under the bid: "bid count text here should be right of the current bid", "on mobile"): the bid
   cell wraps as a row, its label and the time left a line each, so the bid and its count ("14 bids") share one line, the count after the figure on
   its baseline. A count too long for the line goes under the bid, as before. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-bid { flex-flow: row wrap; align-items: baseline; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-bid > :not(.sr-bid, .sr-bid-n) { flex: 0 0 100%; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-bid > .sr-bid { flex: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view]:where(.sr-table) .c-wl-row .c-wl-bid > .sr-bid-n { flex: 0 1 auto; min-width: 0; margin: 0 0 0 8px; } /* its own margin: the cell's gap is 0 here (the compact rows above) */
}
/* Editorial Search cards: the approved mobile mockup, using the live lot data and actions. */
.sr-table .sr-more-phone { display: none; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row {
    grid-template-columns: 88px minmax(0,1fr); grid-template-rows: auto auto auto;
    padding: 14px; gap: 0 14px; --wl-stage-h: 88px; --wl-gal: 88px;
    background: var(--desk);
  }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-gal { width: 88px; align-self: start; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .wlg { height: 88px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .wlg-img { object-fit: cover; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-text { padding: 0; align-self: center; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-title { min-height: 0; font-size: 24px; line-height: 1.03; -webkit-line-clamp: 2; -webkit-text-stroke: 0; letter-spacing: -.01em; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-sub { display: block; margin-top: 7px; font-size: 11px; line-height: 1.35; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-sub:empty { display: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-meta { margin-top: 4px; font-size: 11px; line-height: 1.35; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-house { font-weight: 400; color: inherit; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto auto minmax(14px,auto) auto auto;
    gap: 0 16px; margin: 16px 0 0; border: 0; border-radius: 0; background: transparent; overflow: visible;
  }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures > :is(.c-wl-bid,.c-wl-value) { display: contents; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-bid > * { grid-column: 1; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-value > * { grid-column: 2; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures .c-fig-k { grid-row: 1; margin: 0 0 4px; font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: .08em; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-bid { grid-row: 2; margin: 0; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; white-space: normal; overflow-wrap: anywhere; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-value > b { grid-row: 2; margin: 0; font-size: 21px; font-weight: 500; line-height: 1.35; letter-spacing: -.025em; color: var(--wlc-body,var(--body)); white-space: normal; overflow-wrap: anywhere; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-value > b.sr-none,
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-bid.na { font-size: 15px; letter-spacing: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures :is(.sr-bid-n,.c-fig-n,.sr-wait) { grid-row: 3; margin: 4px 0 0; font-size: 11px; line-height: 1.35; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures .sr-median { display: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures::after { content: ""; grid-column: 1 / -1; grid-row: 4; height: 1px; margin-top: 12px; background: var(--wlc-hair,var(--fill)); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-left,
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-margin { grid-row: 5; align-self: center; min-width: 0; margin: 0; padding: 10px 0; border: 0; gap: 3px 5px; background: transparent; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-left b { font-size: 12px; font-weight: 500; line-height: 1.4; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-left .c-fig-k { margin: 0; font-size: 9px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-margin { justify-content: flex-end; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-marg-label { font-size: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .marg-pill { padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 11px !important; line-height: 1.4 !important; white-space: normal; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions { grid-template-columns: 44px 44px minmax(0,1fr) auto; gap: 0; padding: 4px 0 0; border-top: 1px solid var(--wlc-hair,var(--fill)); container-type: normal; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn,.sr-source,.c-wl-more) { position: relative; inset: auto; grid-column: auto; width: auto; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 0 6px; border: 0; border-radius: var(--r1); background: transparent; color: var(--wlc-ink,var(--ink)); font-size: 12px; font-weight: 500; line-height: 1.3; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn) { width: 44px; padding: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-watch::before { content: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-watch.on { color: var(--blue); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row :is(.sr-watch.on.cf-armed, .sr-watch.on.cf-armed:hover) { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--desk)); } /* 19 October 2026: armed to remove, a red x in the same square (app.css .save-mark.cf-armed) */
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .ap-btn.has { color: var(--risk-ink); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn,.sr-source,.c-wl-more):hover { background: var(--wlc-soft,var(--subtle)); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-more::after { content: ""; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table .sr-more-desktop { display: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table .sr-more-phone { display: inline; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row > .expand { margin-top: 8px; padding: 14px 0; border-inline: 0; border-bottom: 0; }
}
@media (max-width: 360px) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row { grid-template-columns: 76px minmax(0,1fr); padding: 12px; gap: 0 10px; --wl-stage-h: 76px; --wl-gal: 76px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-gal { width: 76px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .wlg { height: 76px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-title { font-size: 22px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions > :is(.sr-source,.c-wl-more) { font-size: 11px; padding-inline: 3px; }
}

.sr-table .sr-title-phone { display: none; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-title:not(.sr-title-phone) { display: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-title-phone { display: -webkit-box; }
}

/* Editorial countdown: clock and digits share the existing urgency colors. */
.sr-countdown-clock { display: none; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-left { color: var(--wlc-ink,var(--ink)); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-left.soon { color: var(--risk-ink); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-left.over { color: var(--faint); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-left b { color: inherit; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-countdown-clock { display: inline-flex; flex: none; align-items: center; color: inherit; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-countdown-clock svg { width: 13px; height: 13px; }
}

/* Give the Editorial card's photo and name more presence on a phone. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row { --sr-photo: clamp(104px,32vw,160px); --wl-stage-h: var(--sr-photo); --wl-gal: var(--sr-photo); grid-template-columns: var(--sr-photo) minmax(0,1fr); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-gal { width: var(--sr-photo); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .wlg { height: var(--sr-photo); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-title { font-size: 28px; line-height: 1.06; -webkit-line-clamp: 3; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-sub { font-size: 13px; line-height: 1.35; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-meta { font-size: 12px; line-height: 1.4; }
}
@media (max-width: 360px) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-title { font-size: 26px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-sub { font-size: 12px; }
}
/* Make the countdown and margin readable alongside the larger Editorial title. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-left b { font-size: 16px; line-height: 1.4; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-countdown-clock svg { width: 16px; height: 16px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-marg-label { font-size: 12px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .marg-pill { font-size: 14px !important; line-height: 1.4 !important; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-left,
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-margin { padding-block: 12px; }
}

/* Quiet mobile footer: the whole card opens via wl-zones; the chevron is its keyboard-accessible cue. */
.sr-table .sr-source-phone { display: none; }
.sr-table .sr-source-desktop { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row { padding-bottom: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row.open { padding-bottom: 14px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions { grid-template-columns: 44px 44px minmax(0,1fr); grid-template-rows: auto 44px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions > .sr-source { grid-column: 3; grid-row: 1; justify-self: end; max-width: 100%; padding-inline: 12px; justify-content: flex-end; text-align: right; /* 17 October 2026 (Carl: "This button should be smaller hit box", then "a tad more padding"): the link hugs its words, not the whole column, with 12px either side */ color: var(--wlc-muted,var(--muted)); font-weight: 400; white-space: normal; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table .sr-source-desktop { display: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table .sr-source-phone { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table .sr-source-arrow { display: inline-flex; flex: none; transform: rotate(45deg); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table .sr-source-arrow svg { width: 13px; height: 13px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions > .c-wl-more { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 44px; min-height: 44px; padding: 0; color: var(--wlc-muted,var(--muted)); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-more .sr-more-phone { display: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-more::after { content: ""; display: block; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-more[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions > .c-wl-more:hover { background: transparent; color: var(--wlc-ink,var(--ink)); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-more::after { transition: none; }
}

/* 17 October 2026 (Carl: "Top right corner should be account button with their picked AI avatar, when clicking you can have
   multiple options, such as dark mode, log out, and others"): on a phone the header's right end is the person's mark, and a press
   opens a menu under it (account-menu.js). Nothing of it shows on a wide screen, where the rail carries the mark and the switch. */
.hdr-account, .acct-menu { display: none; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .hdr-account { display: grid; place-items: center; flex: none; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
  .hdr-account auc-mark { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--desk); }
  .hdr-account:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  /* 17 October 2026 (Carl: "in light mode the background should be white and avatar black so inverted to match whichever setting"): in
     light the mark is a white disc with the mark inverted on it (its light dots go dark, whichever mark is picked); dark keeps the light
     dots on a disc of the page's own dark (--desk; 18 October 2026, Carl: "ensure this matches dark mode", it was #0c0c0e, a darker disc). The mark draws in a shadow canvas, so it is inverted whole (filter) and the disc is drawn by what holds it. */
  html:not([data-theme="dark"]) .hdr-account { background: radial-gradient(circle closest-side, #fff calc(100% - 4px), transparent calc(100% - 3.5px)); }
  html:not([data-theme="dark"]) :is(.hdr-account, .acct-orb) auc-mark { background: transparent; filter: invert(1); }
  html:not([data-theme="dark"]) .acct-orb { background: #fff; }
  .acct-menu:not([hidden]) { display: block; position: fixed; z-index: 12; top: calc(max(12px, env(safe-area-inset-top)) + 54px); right: max(16px, env(safe-area-inset-right)); width: min(320px, calc(100vw - 32px)); max-height: calc(100dvh - 96px); overflow-y: auto; padding: 16px; border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); background: var(--desk); box-shadow: 0 14px 36px rgba(32,30,29,.18); animation: acctIn .16s ease-out both; }
  .acct-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(32,30,29,.1); }
  .acct-orb { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--desk); }
  .acct-orb auc-mark { display: block; width: 44px; height: 44px; }
  .acct-who { display: grid; gap: 2px; min-width: 0; }
  .acct-who b { font: 600 15px/1.3 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct-who span { font: 400 13px/1.3 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct-list { display: grid; padding-top: 6px; }
  .acct-item { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px; border: 0; border-radius: var(--r1); background: transparent; color: var(--ink); font: 500 15px/1.3 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
  .acct-item:active { background: var(--tint); }
  .acct-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
  .acct-out { color: var(--red); }
  .acct-switch { position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--r1); background: rgba(32,30,29,.2); transition: background .16s; }
  .acct-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 2px; background: #fff; transition: transform .16s; }
  .acct-dark[aria-pressed="true"] .acct-switch { background: var(--blue); }
  .acct-dark[aria-pressed="true"] .acct-switch::after { transform: translateX(16px); }
}
@keyframes acctIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .acct-menu:not([hidden]) { animation: none; } .acct-switch, .acct-switch::after { transition: none; } }
/* R192 (21 October 2026, Henry: "from our version can we bring this option bar to carls app, to let people switch models as well as
   the + icon to start a new conversation"): on the Assistant the header's right end has Options (the sliders) and New conversation
   (+) before the account button, 44px each, as our app's phone shell draws them, and Options opens a menu hanging from the header's
   line as the account menu does (assistant-bar.js): the four models, the one in use ticked, and Deep research on the account
   menu's switch. The sliders carry a dot while Deep research is on. The composer's own Deep research, its hint and New conversation
   are the bar's on a phone, so they leave it, and its row goes with them unless the count is showing (from 1,800 characters).
   The + is dimmed while the conversation is empty, as the composer's own New conversation was disabled. Henry, the same message:
   "pressing search in the top left should start a new chat": Search's title is a button (app.js renderShell), its target the
   header's 44px, its look the title's. The bar shows on a phone only; the title is a button at any width. */
.m-acts, .m-opts-menu { display: none; }
.crumb .m-title { min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.crumb .m-title:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--r1); } /* inside: the title's .crumb clips what is outside it */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  html.phone-view .crumb .m-title { display: block; line-height: 44px; }
  html.phone-view .crumb .m-title:active { opacity: .7; }
  .hdr > .m-acts:not([hidden]) { display: flex; flex: none; align-items: center; margin-left: auto; }
  .hdr > .m-acts:not([hidden]) ~ .hdr-account { margin-left: 0; }
  .m-act { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r1); background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-act:active, .m-act.on { background: var(--tint); }
  .m-new[aria-disabled="true"] { opacity: .45; cursor: default; }
  .m-new[aria-disabled="true"]:active { background: none; }
  .m-act:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
  .m-opts[data-deep="on"]::after { content: ""; position: absolute; top: 9px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--desk); }
  .m-opts-menu:not([hidden]) { display: block; position: fixed; z-index: 12; top: calc(max(12px, env(safe-area-inset-top)) + 54px); right: max(16px, env(safe-area-inset-right)); width: min(320px, calc(100vw - 32px)); max-height: calc(100dvh - 96px); overflow-y: auto; padding: 14px 12px 8px; border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); background: var(--desk); box-shadow: 0 14px 36px rgba(32,30,29,.18); animation: acctIn .16s ease-out both; }
  .mo-k { display: block; padding: 0 4px 4px; font: 600 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  .mo-list { display: grid; }
  .mo-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 6px 4px; border: 0; border-radius: var(--r1); background: transparent; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mo-item:active { background: var(--tint); }
  .mo-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
  .mo-label { display: grid; gap: 2px; min-width: 0; }
  .mo-label b { font: 500 15px/1.3 var(--sans); color: var(--ink); }
  .mo-label span { font: 400 13px/1.35 var(--sans); color: var(--muted); }
  .mo-model[aria-pressed="true"] .mo-label b { font-weight: 600; color: var(--blue); }
  .mo-check { flex: none; width: 20px; height: 20px; }
  .mo-model[aria-pressed="true"] .mo-check { background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
  .mo-sec { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(32,30,29,.1); }
  .mo-deep[aria-pressed="true"] .acct-switch { background: var(--blue); }
  .mo-deep[aria-pressed="true"] .acct-switch::after { transform: translateX(16px); }
  .as-row { display: contents; } /* its count alone stays, on a line of its own once there is one, as in our app's phone shell (phone.css) */
  .as-row > :not(.as-count) { display: none; }
  .as-row > .as-count:not(:empty) { display: block; margin: 8px 2px 0; text-align: right; }
}
@media (max-width: 349px) { .hdr > .m-acts:not([hidden]) ~ .hdr-account { margin-left: -8px; } } /* 2px between the + and the account button, so "Assistant" keeps its whole word at 320px */
@media (prefers-reduced-motion: reduce) { .m-opts-menu:not([hidden]) { animation: none; } }
@media (forced-colors: active) {
  .m-opts[data-deep="on"]::after, .mo-model[aria-pressed="true"] .mo-check { background: CanvasText; forced-color-adjust: none; }
  .acct-switch { border: 1px solid CanvasText; } /* the switch is drawn in fills alone, which forced colours take away: its track, its knob, and on, the knob's side in Highlight (the account menu's Dark mode too) */
  .acct-switch::after { background: CanvasText; forced-color-adjust: none; }
  [aria-pressed="true"] > .acct-switch { background: Highlight; forced-color-adjust: none; }
}
/* 17 October 2026 (Carl: "The bell and the bookmark on mobile buttons should be a bit larger"): on a phone a Search card's Save and alert
   icons are 20px, up from 16, in their same 44px squares (the Watchlist's bell keeps 16 in its 30px box); the bell's sound waves move out with its larger edge. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn) svg { width: 20px; height: 20px; }
}
/* 17 October 2026 (Carl: "In mobile search no hover window on add photo or tag as there is no such thing in mobile"): on a touch
   screen the composer's tool explainer (chat.js #explainer, opened by a tap's emulated mouseover and focus) never shows, and a tapped
   chip keeps no hover lift. A mouse, however narrow the window, keeps both. */
@media (hover: none) {
  .composer-wrap .explainer { display: none !important; }
  .composer-wrap .tchip:hover { box-shadow: none; }
}
/* Approved mobile week: seven visible dates and the selected day's agenda. */
.wl-week-mobile { display: none; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  #watchlist .wl-week .wl-week-desktop { display: none; }
  /* --wm-g is the card's one text edge: the range, Today, All 7 days, the day panel and the footer all start and end on it;
     buttons keep their hit area and pull back by their own padding (17 October 2026, Carl: "padding ... a bit off"). */
  #watchlist .wl-week .wl-week-mobile { --wm-g: 16px; display: block; background: var(--desk); color: var(--ink); }
  #watchlist .wl-week .wl-week-mobile button { font-family: var(--sans); cursor: pointer; }
  #watchlist .wl-wm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px var(--wm-g) 6px; }
  #watchlist .wl-wm-head > span { font-size: 18px; font-weight: 500; letter-spacing: -.35px; white-space: nowrap; }
  #watchlist .wl-wm-head > div { display: flex; gap: 2px; margin-right: calc(-1 * var(--wm-g)); } /* › sits ~18px inside its 44px box */
  #watchlist .wl-wm-head button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r1); background: transparent; color: var(--muted); font-size: 23px; }
  #watchlist .wl-wm-subnav { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 var(--wm-g) 10px; }
  #watchlist .wl-wm-subnav button { min-height: 36px; margin-left: -8px; padding: 0 8px; background: transparent; border: 0; color: var(--blue); font-size: 12px; }
  #watchlist .wl-wm-subnav > span { font-size: 11px; color: var(--muted); }
  #watchlist .wl-wm-strip { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); padding: 8px 0 12px; border-block: 1px solid var(--fill); }
  #watchlist .wl-wm-day { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; min-height: 76px; padding: 6px 0; border: 0; border-radius: var(--r1); background: transparent; color: var(--ink); }
  #watchlist .wl-wm-dow { font-size: 11px; color: var(--muted); }
  #watchlist .wl-wm-day b { min-width: 32px; border-radius: var(--r1); font-size: 18px; line-height: 30px; font-weight: 400; }
  #watchlist .wl-wm-day[aria-pressed="true"] b { background: var(--tint); color: var(--blue); font-weight: 500; }
  #watchlist .wl-wm-day.today .wl-wm-dow { color: var(--blue); }
  #watchlist .wl-wm-dots { display: flex; gap: 3px; min-height: 5px; }
  #watchlist .wl-wm-dots i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }
  #watchlist .wl-wm-agenda { min-height: 255px; padding: 18px var(--wm-g) 14px; }
  #watchlist .wl-wm-agenda[hidden] { display: none; }
  #watchlist .wl-wm-agenda[hidden] + .wl-wm-footer { border-top: 0; } /* the day closed (wl-week.js mobileHtml): the strip's own line is the footer's, not two */
  #watchlist .wl-wm-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 13px; }
  #watchlist .wl-wm-heading h3 { margin: 0; font: 400 25px/1.1 var(--serif); letter-spacing: -.2px; }
  #watchlist .wl-wm-heading > span { font-size: 11px; color: var(--muted); }
  #watchlist .wl-wm-event { display: grid; grid-template-columns: 49px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 13px 0; border: 0; border-top: 1px solid var(--fill); border-radius: 0; background: transparent; color: var(--ink); text-decoration: none; text-align: left; }
  #watchlist .wl-wm-event time { align-self: start; padding-top: 2px; font-size: 13px; font-variant-numeric: tabular-nums; }
  #watchlist .wl-wm-event-main { min-width: 0; overflow-wrap: anywhere; }
  #watchlist .wl-wm-event-main strong { display: block; font-size: 15px; font-weight: 500; }
  #watchlist .wl-wm-event-main small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
  #watchlist .wl-wm-count { color: var(--muted); font-size: 11px; white-space: nowrap; }
  #watchlist .wl-wm-event[aria-pressed="true"] { background: var(--tint); color: var(--blue); }
  #watchlist .wl-wm-event.elapsed { color: var(--muted); }
  #watchlist .wl-wm-empty { padding: 18px 0; border-top: 1px solid var(--fill); font-size: 13px; color: var(--muted); }
  #watchlist .wl-wm-more { min-height: 44px; padding: 10px 0 0; border: 0; background: transparent; color: var(--blue); font-size: 12px; text-align: left; }
  #watchlist .wl-wm-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px calc(var(--wm-g) - 4px); border-top: 1px solid var(--fill); }
  #watchlist .wl-wm-footer > :is(a,button) { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--muted); font: 400 12px/1.4 var(--sans); text-decoration: none; }
  #watchlist .wl-week-mobile button:hover, #watchlist .wl-wm-footer a:hover { background: var(--subtle); }
  #watchlist .wl-wm-agenda .wl-week-selection { display: block; margin-bottom: 10px; }
  #watchlist .wl-wm-agenda .wl-week-selection button { min-height: 32px; border: 0; background: transparent; color: var(--blue); }
}
@media (max-width: 360px) {
  #watchlist .wl-week { margin-inline: -12px; }
  #watchlist .wl-week .wl-week-mobile { --wm-g: 14px; }
  #watchlist .wl-wm-head > span { font-size: 17px; }
  #watchlist .wl-wm-head > div { gap: 0; }
}
/* 17 October 2026 (Carl: "On mobile Truncate title to 40 characters with ..."): a title over 40 characters carries both forms
   (lot-card.js phoneTitleHtml); the phone shows the cut one. Search's own phone title (.sr-title-phone) is cut in chat.js. */
.t-short { display: none; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .t-long { display: none; }
  .t-short { display: inline; }
}
/* 17 October 2026 (Carl: "imagine better way to format/show time and implement on mobile"): the time left as words and a moment (lot-card.js
   timeWords): "Closes in 2 d 3 h" over "Tomorrow, 21:00", in place of the "2d:02h:59m" figure, in Search and the Watchlist. The words take
   the row's urgency colour (red under a day, faint once closed); the moment is quiet. The desktop keeps the figure. */
.c-wl-left-m { display: none; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .c-wl-left > b, .c-wl-left.starts > .c-fig-k { display: none; }
  .c-wl-left-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .c-wl-left-m > i { font-style: normal; line-height: 1.25; white-space: nowrap; }
  .c-wl-left-m > .c-wl-in { font-size: 13px; font-weight: 500; color: inherit; }
  .c-wl-left.soon .c-wl-in { color: var(--risk-ink); } /* app.css colours the figure (.c-wl-left.soon b), so the words take the same */
  .c-wl-left.over .c-wl-in { color: var(--faint); }
  .c-wl-left-m > .c-wl-at { font-size: 11px; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }
}
/* 17 October 2026 (Carl, on a phone: "still breaking"): an earlier answer in a Search thread (chat.js historyResultsHtml, keyed hr-*) is
   the desktop's five-column table, and on a phone its 340px of figure columns squeezed the lot's name to one letter a line. Here each
   row is the photo and the name across the width, with Bid, Closes and Estimate under it, each with its own small label. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .chat .msg[data-key^="hr-"] .table .thead { display: none; }
  .chat .msg[data-key^="hr-"] .table .trow-main { grid-template-columns: 18px repeat(3, minmax(0,1fr)); gap: 10px; align-items: start; padding: 12px; }
  .chat .msg[data-key^="hr-"] .table .trow-main > .rank { padding-top: 16px; }
  .chat .msg[data-key^="hr-"] .table .trow-main > .lot { grid-column: 2 / -1; }
  .chat .msg[data-key^="hr-"] .table .trow-main > :is(.bid,.est) { grid-row: 2; text-align: left; white-space: normal; line-height: 1.3; }
  .chat .msg[data-key^="hr-"] .table .trow-main > :nth-child(3) { grid-column: 2; }
  .chat .msg[data-key^="hr-"] .table .trow-main > :nth-child(4) { grid-column: 3; }
  .chat .msg[data-key^="hr-"] .table .trow-main > :nth-child(5) { grid-column: 4; }
  .chat .msg[data-key^="hr-"] .table .trow-main > :is(.bid,.est)::before { display: block; margin-bottom: 3px; font: 500 9.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
  .chat .msg[data-key^="hr-"] .table .trow-main > :nth-child(3)::before { content: "Bid"; }
  .chat .msg[data-key^="hr-"] .table .trow-main > :nth-child(4)::before { content: "Closes"; }
  .chat .msg[data-key^="hr-"] .table .trow-main > :nth-child(5)::before { content: "Estimate"; }
}
/* 17 October 2026 (Carl, with a screenshot of the earlier answers' rows: "Let's make the initial results this size to fit more on
   screen"): the live Search card on a phone at that row's scale, about 400px tall down to about 200. A 64px photo (the gallery still
   steps), the name at 18px, the figures at 17px, and the chevron in the actions row instead of a row of its own. The photo's "in 2 d"
   chip goes: the countdown line under the figures says the same. Overrides the "more presence" rules above, so it comes last.
   Then (Carl: "Item name in mobile should be larger and thicker to show heirarchy. Also, image should be enlarged just a bit"): the
   photo 76px, the name 22px with the hairline stroke that thickens the one-weight serif elsewhere (.lot-title, .c-wl-title). */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row { --sr-photo: 76px; --wl-stage-h: 76px; --wl-gal: 76px; grid-template-columns: 76px minmax(0,1fr); padding: 12px 12px 0; gap: 0 12px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-gal { width: 76px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .wlg { height: 76px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-when { display: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .wlg-count { right: 3px; bottom: 3px; padding: 1px 4px; font-size: 9px; line-height: 1.3; } /* "1 / 8" kept, at the small photo's scale */
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-text { align-self: start; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-title { font-size: 22px; line-height: 1.12; -webkit-line-clamp: 2; -webkit-text-stroke: .025em currentColor; color: var(--wlc-ink, var(--ink)); }
  .chat .sr-table.c-wl-table[data-view] .c-wl-row.open .c-wl-title { color: var(--blue); } /* 19 October 2026: an open card's title is blue, as the Calendar's (app.css .c-wl-row.open .c-wl-title); not in the Watchlist (Carl) */
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-sub { display: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-meta { margin-top: 3px; font-size: 12px; line-height: 1.35; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures { margin-top: 10px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures .c-fig-k { margin-bottom: 2px; font-size: 9.5px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-bid,
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-value > b { font-size: 17px; line-height: 1.3; letter-spacing: -.02em; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures :is(.sr-bid-n,.c-fig-n,.sr-wait) { margin-top: 2px; font-size: 11px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures::after { margin-top: 8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row :is(.c-wl-left,.c-wl-margin) { padding-block: 6px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-left b { font-size: 13px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-countdown-clock svg { width: 13px; height: 13px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-marg-label { font-size: 11px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .marg-pill { font-size: 12px !important; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions { grid-template-columns: 44px 44px minmax(0,1fr); grid-template-rows: 44px; }
  /* 17 October 2026 (Carl, with a screenshot of the chevron: "This can be removed should be intuitive to click to open"): a press anywhere on the
     card opens it (wl-zones), so the chevron is not drawn; the button stays for VoiceOver and the keyboard, clipped to nothing. */
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions > .c-wl-more { position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Search's expanded card: a small plot and a bounded list of compact sales. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table .sr-sales .c-wl-sales { padding: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .wi-tabs { gap: 8px; margin-bottom: 12px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .wi-tabs button { font-size: 12px; padding-inline: 6px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls { gap: 12px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-head { gap: 8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-eyebrow { font-size: 9px; margin-bottom: 4px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-model, :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-sub { font-size: 12px; line-height: 1.4; margin-top: 3px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-acts { width: 100%; gap: 8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-acts .c-btn.sm { min-height: 44px; font-size: 11px; padding-inline: 8px; flex: 1; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-strip { padding-block: 8px; gap: 6px 12px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-key { gap: 5px; font-size: 10px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-keyfig { font-size: 12px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-count { font-size: 10px; flex-basis: auto; margin-left: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-cols { gap: 12px; grid-template-columns: minmax(0,1fr); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-colhead { margin-bottom: 8px; padding-bottom: 6px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-coltitle { font-size: 13px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-colnote { font-size: 10px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-chartcard { padding: 6px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-chart { --ls-chart-height: 210px; min-height: 210px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-readout { font-size: 11px; line-height: 1.4; margin-top: 6px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-compscol { display: block; contain: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-compscol .c-ls-rows { display: grid; max-height: 224px; overflow-y: auto; overscroll-behavior-y: contain; margin: 0; padding: 2px; gap: 6px; scrollbar-width: thin; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-row { grid-template-columns: 48px minmax(0,1fr) auto; grid-template-areas: "ph what amt" "ph what links"; gap: 4px 8px; padding: 8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-row[aria-current="true"] { padding-left: 7px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-ph, :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-ph .sp-photo { width: 48px; height: 48px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-num { width: 18px; height: 18px; font-size: 9px; top: -5px; left: -5px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-house { font-size: 12px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-date, :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-detail, :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-lot, :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-orig { font-size: 10px; line-height: 1.35; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls .c-ls-row .c-ls-amt { margin: 0; text-align: right; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls .c-ls-row .c-ls-amt b { font-size: 14px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-links { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 0; white-space: normal; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-links a { display: inline-flex; align-items: center; min-height: 32px; margin: 0; font-size: 10px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-fold { min-height: 44px; margin-top: 4px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-note { font-size: 11px; margin-top: 4px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .wi-layout { gap: 12px; line-height: 1.45; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .wi-layout h3 { font-size: 24px; margin-bottom: 8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .wi-layout h4 { font-size: 18px; margin-bottom: 8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .wi-layout p { font-size: 12px; margin-bottom: 8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .wi-images img { height: 72px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .wi-facts { padding: 12px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .wi-facts dl { margin-block: 8px 12px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .wi-facts dl > div { padding-block: 6px; font-size: 12px; }
}
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row > .expand.sr-sales { padding-block: 8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls, :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-cols { gap: 8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-chart { --ls-chart-height: 200px; min-height: 200px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-compscol .c-ls-rows { max-height: 168px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-strip { padding-block: 6px; }
}
/* Compact chart key: quiet labels and figures rather than a second summary. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-strip { gap: 4px 10px; padding-block: 5px; border-top: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-key { gap: 4px; font-size: 9px; line-height: 1.3; white-space: nowrap; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-swatch { width: 16px; height: 8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-keyfig { font-size: 10px; font-weight: 500; line-height: 1.3; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-count { font-size: 9px; line-height: 1.3; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-key-band .c-ls-keyname { font-size: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-key-band .c-ls-keyname::after { content: "Middle 50%"; font-size: 9px; }
}

@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-chartcol .c-ls-colhead { gap: 10px 12px; margin-bottom: 12px; padding-bottom: 10px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-chartcol .c-ls-strip { justify-content: flex-start; flex-basis: 100%; gap: 8px 14px; padding: 0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-chartcol .c-ls-key { font-size: 11px; line-height: 1.5; gap: 4px 6px; white-space: normal; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-chartcol .c-ls-keyfig { font-size: 12px; line-height: 1.5; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-chartcol .c-ls-key-band .c-ls-keyname { font-size: 11px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-chartcol .c-ls-key-band .c-ls-keyname::after { content: none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .c-ls-chartcol .c-ls-count { font-size: 11px; line-height: 1.5; }
}

/* Mobile facts use the full width: two readable label/value stacks per row. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  .wi-layout .wi-facts { padding:14px; align-self:start; }
  .wi-layout .wi-facts header h4 { font-size:24px; line-height:1.1; margin:0 0 12px; }
  .wi-layout .wi-facts > h4 { font-size:20px; line-height:1.15; margin:16px 0 6px; }
  .wi-layout .wi-facts dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; margin:0; }
  .wi-layout .wi-facts dl > div { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:4px; min-width:0; padding:9px 0; }
  .wi-layout .wi-facts dt { font-size:11px; line-height:1.35; }
  .wi-layout .wi-facts dd { font-size:13px; line-height:1.4; margin:0; overflow-wrap:anywhere; }
  .wi-layout .wi-facts .wi-link { min-height:44px; margin-top:14px; }
}

/* About photos are real gallery controls; keep desktop's three-photo preview. */
.wi-images .wi-photo { display:block; width:100%; padding:0; border:0; border-radius:var(--r1); background:transparent; cursor:zoom-in; }
.wi-images figure:nth-child(n+4) { display:none; }
.sp-viewer .pv-fig { touch-action:pan-y pinch-zoom; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  .wi-layout .wi-images { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; overflow:visible; padding:2px 0; margin-block:16px; }
  .wi-layout .wi-images figure { display:block; min-width:0; margin:0; }
  .wi-layout .wi-images figure:nth-child(n+4) { display:none; }
  .wi-layout .wi-images .wi-photo { min-height:44px; touch-action:manipulation; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-sales .wi-layout .wi-images img, .wi-layout .wi-images img { display:block; width:100%; height:96px; object-fit:contain; }

}

/* A real content edge on phones; never reserve a viewport after the last lot. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .chat .thread { padding-bottom: 24px !important; overscroll-behavior-y: contain; }
}

/* Approved aligned columns: price and secondary metric share each column's edge. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures { --sr-column-gap:22px; column-gap:var(--sr-column-gap); grid-template-rows:auto auto minmax(20px,auto) auto auto; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures :is(.sr-bid,.c-wl-value > b) { font-size:23px; line-height:1.2; font-weight:500; letter-spacing:-.035em; color:var(--wlc-ink,var(--ink)); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures::after { margin-top:10px; background-color:transparent; background-image:linear-gradient(var(--wlc-hair,var(--fill)),var(--wlc-hair,var(--fill))),linear-gradient(var(--wlc-hair,var(--fill)),var(--wlc-hair,var(--fill))); background-size:calc((100% - var(--sr-column-gap)) / 2) 1px; background-position:left top,right top; background-repeat:no-repeat; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row :is(.c-wl-left,.c-wl-margin) { display:flex; flex-direction:column; align-items:flex-start; align-self:start; justify-content:flex-start; gap:7px; padding:14px 0 16px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-left > .c-fig-k { display:block; position:static; width:auto; height:auto; clip:auto; overflow:visible; white-space:normal; margin:0; font-size:10px; font-weight:500; line-height:1.3; letter-spacing:.08em; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-marg-label { font-size:10px; font-weight:500; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-countdown-clock { display:none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-in { font-size:18px; line-height:1.2; font-weight:500; letter-spacing:-.015em; white-space:normal; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-at { margin-top:4px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .marg-pill { font-size:18px !important; font-weight:500; line-height:1.2 !important; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-margin .lc-pill { align-self:flex-start; }
}
@media (max-width:360px) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures { --sr-column-gap:14px; column-gap:var(--sr-column-gap); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures :is(.sr-bid,.c-wl-value > b) { font-size:20px; }
}

@media (max-width:699px), (max-height:500px) and (pointer:coarse) { :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures .c-wl-value > b.sr-none { font-size:15px; } }

/* 17 October 2026 (Carl, with a screenshot of a phone card: "Condense things a bit as the image and title are most important part of the mobile
   cards. yet they are smaller than the other elements"): the photo 76 to 104px and the name 22 to 24px lead; the figures step back (prices 23 to
   18px, Closes in and Margin 18 to 15px) and their cells tighten (14/16px padding to 8/10). Comes after the blocks above, which it overrides. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row { --sr-photo:104px; --wl-stage-h:104px; --wl-gal:104px; grid-template-columns:104px minmax(0,1fr); gap:0 14px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-gal { width:104px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .wlg { height:104px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-title { font-size:24px; line-height:1.08; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures { margin-top:12px; --sr-column-gap:18px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures .c-fig-k { margin-bottom:2px; font-size:9.5px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures :is(.sr-bid,.c-wl-value > b) { font-size:18px; line-height:1.25; letter-spacing:-.025em; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures :is(.sr-bid-n,.c-fig-n,.sr-wait) { margin-top:1px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures::after { margin-top:8px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row :is(.c-wl-left,.c-wl-margin) { gap:3px; padding:8px 0 10px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row :is(.c-wl-left > .c-fig-k,.c-marg-label) { font-size:9.5px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-in,
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .marg-pill { font-size:15px !important; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-at { margin-top:0; font-size:11px; }
}
@media (max-width:360px) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row { --sr-photo:88px; --wl-stage-h:88px; --wl-gal:88px; grid-template-columns:88px minmax(0,1fr); gap:0 12px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-gal { width:88px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .wlg { height:88px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-title { font-size:22px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-figures { --sr-column-gap:14px; }
}

/* Optional evidence for the approved mobile metric summary. */
.sr-metric-details, .sr-gap, .sr-brief { display:none; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-brief { display:block; grid-row:3; font-size:11px; line-height:1.4; color:var(--muted); margin-top:4px; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .marg-ind-w { display:none; } /* 18 October 2026 (Carl): no "indicative" on a phone card; the dotted pill and its title stay */
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-gap { display:block; font-size:11px; line-height:1.4; color:var(--muted); }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-metric-details { display:block; grid-column:1/-1; grid-row:3; width:100%; min-width:0; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .sr-metric-details:empty { display:none; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions { grid-row:4; }
  :is(.chat, .wl-lots, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row > .expand { grid-row:5; }
  .sr-metric-details details { border-top:1px solid var(--wlc-hair,var(--fill)); }
  .sr-metric-details summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 0; list-style:none; font:500 12px/1.4 var(--sans); color:var(--ink); cursor:pointer; }
  .sr-metric-details summary::-webkit-details-marker { display:none; }
  .sr-metric-details summary > span { flex:none; display:grid; place-items:center; width:20px; height:20px; transform:rotate(90deg); transition:transform .16s; } /* one chevron, centred in its box, turned in place */
  .sr-metric-details details[open] summary > span { transform:rotate(-90deg); }
  .sr-metric-details .sr-metric-body { padding:0 0 14px; font:400 12px/1.5 var(--sans); }
  .sr-metric-details dl { margin:0; }
  .sr-metric-details dl > div { display:flex; justify-content:space-between; gap:12px; padding:5px 0; }
  /* 17 October 2026 (Carl: "better darkness hierarchy so subtext is known as subtext"): three steps, the figure in ink and medium, its
     label a step lighter, and the note under them the muted grey, smaller (the label and the note were one grey). */
  .sr-metric-details dt { color:color-mix(in srgb, var(--wlc-ink,var(--ink)) 80%, transparent); }
  .sr-metric-details dd { margin:0; text-align:right; overflow-wrap:anywhere; font-weight:500; font-variant-numeric:tabular-nums; color:var(--wlc-ink,var(--ink)); }
  .sr-metric-details p { margin:10px 0 0; font-size:11px; line-height:1.45; color:var(--wlc-muted,var(--muted)); }
}

/* 17 October 2026 (Carl: "We are going to use this current mobile search UI for the mobile watchlist instead ... this current UI should exactly
   replace the old watchlist list of saved items"): on a phone the saved lots are Search's cards (watchlist.js phoneRow, in a table marked
   .sr-table inside #c-wl-body.wl-lots), so every ":is(.chat, .wl-lots, .wl-sess-m) .sr-table" rule above draws them. What is the Watchlist's alone: no arrows
   on the photo (a finger across it flips it, wl-gallery.js), and, once the card is open, the strip of its own controls (List, ceiling, your
   value, "Wrong label?") between the bookmark row and the Past sales panel. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .wl-lots .sr-table .c-wl-row .wlg-nav { display: none; }
  /* the bookmark removes the lot, asking first (confirm.js): armed, it reads "Confirm remove" in red over the bookmark and the bell for its 4 seconds */
  .wl-lots .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-actions > .ap-btn { grid-column: 2; grid-row: 1; }
  .wl-lots .sr-table.c-wl-table[data-view] .c-wl-row > .wl-m-tools { grid-column: 1 / -1; grid-row: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 4px; padding: 14px 0 4px; border-top: 1px solid var(--wlc-hair, var(--fill)); }
  .wl-lots .sr-table.c-wl-table[data-view] .c-wl-row > .wl-m-tools > :is(.c-wl-ceiling, .wl-m-value) { display: flex; align-items: center; gap: 12px; width: 100%; }
  .wl-lots .sr-table.c-wl-table[data-view] .c-wl-row > .wl-m-tools > .c-wl-value.wl-m-value { display: block; padding: 0; border: 0; background: none; } /* the value's editor, in the flow here: there is no figure under it to hold */
  .wl-lots .sr-table .wl-m-value .c-val-hold { display: none; }
  .wl-lots .sr-table .wl-m-value .c-val-slot > .c-val-edit { position: static; inset: auto; margin: 0; flex-flow: row wrap; column-gap: 6px; overflow: visible; }
  .wl-lots .sr-table .wl-m-value .c-val-slot > .c-val-edit > .c-val-hint { flex-basis: 100%; }
  .wl-lots .sr-table.c-wl-table[data-view] .c-wl-row > .c-wl-report { grid-column: 1 / -1; grid-row: 6; }
  /* the Past sales panel (.c-wl-sales.sr-sales, so the ":is(.chat, .wl-lots, .wl-sess-m) .sr-sales" rules above take its insides) in the box Search's .expand
     has on a phone: a hairline over it, no frame, no fill, no caption */
  .wl-lots .sr-table.c-wl-table[data-view] .c-wl-row > .c-wl-sales.sr-sales { grid-column: 1 / -1; grid-row: 7; margin-top: 8px; padding: 8px 0; border: 0; border-top: 1px solid var(--wlc-hair, rgba(32,30,29,.1)); border-radius: 0; background: none; }
  .wl-lots .sr-table .c-wl-sales.sr-sales .c-ls-headtext { display: none; }
  .wl-lots .sr-table .c-wl-sales.sr-sales .c-ls-head { justify-content: flex-end; }
}

/* Mobile Search shows the full result card immediately. */
.sr-secondary { display:none; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-metric-details, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-metric-details { display:none; }
}
/* Watchlist toolbar: labels above aligned fields, with clear group spacing. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  #watchlist #wl-lots-panel > .view-head { gap:22px 16px; margin-bottom:24px; padding-top:4px; }
  #watchlist #wl-lots-panel > .view-head > h2 { line-height:1.15; }
  #watchlist #wl-lots-panel > .view-head > [data-act="wl-reload"] { padding-inline:14px; }
  #watchlist .wl-ctl-sort, #watchlist .wl-ctl-list { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px; height:auto; }
  #watchlist :is(.wl-ctl-sort,.wl-ctl-list) .wl-ctl-k { font:400 12px/1.35 var(--sans); color:var(--muted); }
  #watchlist :is(.wl-ctl-sort,.wl-ctl-list) select { height:44px; min-height:44px; width:100%; padding-inline:12px 32px; font-weight:400; }
  #watchlist .wl-lot-tools { padding:0; margin:0 0 24px; }
  #watchlist .wl-lot-tools label { display:flex; flex-direction:column; gap:8px; font:400 12px/1.35 var(--sans); }
  #watchlist .wl-lot-tools input { height:44px; min-height:44px; padding-inline:12px; }
  #watchlist .wl-listbar { margin:0 0 24px; }
  #watchlist .wl-chips { align-items:flex-end; gap:12px; }
  #watchlist .wl-ctl-list { flex:1 1 180px; min-width:0; }
  #watchlist .wl-add { align-self:flex-end; display:flex; align-items:center; min-height:44px; }
  #watchlist .wl-new { height:44px; min-height:44px; padding-inline:12px; white-space:nowrap; }
  #watchlist .wl-tools, #watchlist .wl-field, #watchlist .wl-confirm { flex-wrap:wrap; gap:8px; }
}

/* Mobile Watchlist prioritizes saved cards over calendar and toolbar chrome. */
.wl-control-toggle { display:none; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  #watchlist.pane { padding-top:8px; }
  #watchlist .wl-content-tabs { margin-bottom:8px; }
  #watchlist .wl-week { margin:0 0 12px; }
  #watchlist .wl-week .wl-week-mobile { display:grid; grid-template-columns:minmax(0,1fr) auto auto; --wm-g:10px; }
  #watchlist .wl-wm-head, #watchlist .wl-wm-subnav { display:contents; }
  #watchlist .wl-wm-head > span { grid-column:1; grid-row:1; align-self:center; padding-left:10px; font-size:14px; }
  #watchlist .wl-wm-head > div { grid-column:3; grid-row:1; margin:0; }
  #watchlist .wl-wm-head button { width:36px; height:44px; font-size:20px; }
  #watchlist .wl-wm-subnav > button { grid-column:2; grid-row:1; min-height:44px; font-size:11px; margin:0; padding:0 6px; }
  #watchlist .wl-wm-subnav > span, #watchlist .wl-wm-footer { display:none; }
  #watchlist .wl-wm-strip { grid-column:1/-1; padding:4px 0; }
  #watchlist .wl-wm-day { min-height:54px; gap:2px; padding:2px 0; }
  #watchlist .wl-wm-day b { font-size:15px; line-height:24px; }
  #watchlist .wl-wm-dow { font-size:10px; }
  #watchlist .wl-wm-agenda { grid-column:1/-1; min-height:0; max-height:170px; overflow:auto; padding:10px; }
  #watchlist .wl-wm-heading { margin-bottom:6px; }
  #watchlist .wl-wm-heading h3 { font-size:20px; }
  #watchlist .wl-wm-event { padding-block:8px; }
  #watchlist #wl-lots-panel > .view-head, #watchlist #wl-sessions-panel > .view-head { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; padding-top:0; align-items:center; }
  #watchlist .view-head h2 { font-size:22px; margin-right:auto; }
  /* 19 October 2026 (Carl: "Saved Lots should be aligned on the bottom with the buttons ... a bit larger and a bit bolder"): the title sits on the
     buttons' bottom edge (its baseline, the descender space pulled under), 26px, and the serif's one weight thickened by a hairline stroke as the lot titles are */
  #watchlist #wl-lots-panel > .view-head, #watchlist #wl-sessions-panel > .view-head { align-items:flex-end; }
  #watchlist #wl-lots-panel > .view-head > h2, #watchlist #wl-sessions-panel > .view-head > h2 { font-size:26px; line-height:1; margin-bottom:-.11em; -webkit-text-stroke:.025em currentColor; }
  #watchlist .view-head .sub:empty { display:none; }
  #watchlist .wl-control-toggle { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0; border:1px solid var(--fill); border-radius:var(--r1); background:var(--desk); color:var(--ink); font:500 12px/1 var(--sans); }
  #watchlist .view-head > [data-act="wl-reload"] { min-height:44px; padding-inline:10px; font-size:12px; }
  #watchlist [role="tabpanel"]:not([data-controls-open="true"]) .wl-sortbar, #watchlist #wl-lots-panel:not([data-controls-open="true"]) #c-wl-lists { display:none; }
  #watchlist .wl-sortbar { flex-basis:100%; margin-block:6px; }
  #watchlist .wl-lot-tools { margin-bottom:12px; }
  #watchlist .wl-lot-tools label { font-size:0; gap:0; }
  #watchlist .wl-lot-tools input { font-size:16px; }
  #watchlist .wl-listbar { margin-bottom:12px; }
}
.wl-session-card .wl-session-quick-preview { display:none; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
}
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  #wl-session-rows > .fine { margin:0 0 6px; font-size:11px; line-height:1.3; }
}


/* Mobile Search takes its compact layout from saved Watchlist cards. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) { display:grid; grid-template-columns:76px minmax(0,1fr) 44px; grid-template-rows:auto 1fr; gap:0 10px; padding:10px; --wl-stage-h:76px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-gal, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-gal { grid-column:1; grid-row:1/span 2; width:76px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .wlg, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .wlg { height:76px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-text, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-text { grid-column:2; grid-row:1; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-title-phone, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-title-phone { font-size:20px; line-height:1.1; -webkit-line-clamp:2; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-meta, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-meta { font-size:11px; margin-top:3px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures { grid-column:2; grid-row:2; grid-template-rows:auto auto; gap:0 10px; margin-top:8px; align-self:start; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row :is(.sr-metric-details,.c-wl-left,.sr-bid-n,.c-fig-n,.sr-gap,.src,.bid-kind), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) :is(.sr-metric-details,.c-wl-left,.sr-bid-n,.c-fig-n,.sr-gap,.src,.bid-kind) { display:none; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-value > :is(b,.c-fig-k), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-value > :is(b,.c-fig-k) { display:none; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-bid > .c-fig-k, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-bid > .c-fig-k { grid-row:1; font-size:9px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-bid, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-bid { grid-row:2; font-size:16px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-margin, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-margin { grid-row:1/span 2; gap:3px; padding:0; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .marg-pill, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .marg-pill { font-size:13px !important; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions { grid-column:3; grid-row:1/span 2; display:flex; flex-direction:column; width:44px; gap:0; padding:0; margin:0; border:0; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions > .sr-source, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions > .sr-source { display:none; }

  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-main, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-main { display:contents; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-text, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-text { align-self:start; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .wlg, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .wlg { border-radius:4px; overflow:hidden; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .wlg-count, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .wlg-count { display:none; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures::after, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures::after { content:none; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row :is(.sr-brief,.sr-sub,.sr-wait), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) :is(.sr-brief,.sr-sub,.sr-wait) { display:none; }
}

.sr-quick-details { display:none; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) { grid-template-rows:auto auto; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row.open { padding-bottom:10px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row.open .sr-quick-details { display:grid; grid-column:1/-1; grid-row:3; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; margin-top:12px; padding-top:12px; border-top:1px solid var(--wlc-hair,var(--fill)); font:400 11px/1.4 var(--sans); color:var(--wlc-muted,var(--muted)); }
  .sr-quick-details .c-fig-k { display:block; margin-bottom:4px; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
  .sr-quick-details b { display:block; font-size:16px; line-height:1.3; font-weight:500; color:var(--wlc-ink,var(--ink)); }
  .sr-quick-details :is(.c-wl-margin,.sr-brief,.src,.sr-countdown-clock) { display:none; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-quick-details .sr-median, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-quick-details .sr-median { display:block; margin-top:3px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-quick-details .c-wl-left, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-quick-details .c-wl-left { display:block; padding:0; margin:0; }
  .sr-quick-details .c-wl-at { display:block; margin-top:3px; }
  .sr-quick-details > a { grid-column:1/-1; justify-self:start; display:inline-flex; align-items:center; min-height:44px; color:var(--wlc-ink,var(--ink)); text-decoration:none; }
}

@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-quick-details .sr-wait, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-quick-details .sr-wait { display:block; }
  .sr-quick-details .c-wl-left > b { display:none; }
  .sr-quick-details .c-wl-in { display:block; font-size:16px; font-weight:500; color:var(--wlc-ink,var(--ink)); }
}

@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] .c-wl-row .c-wl-more::after, .wl-lots .sr-table.c-wl-table[data-view] .c-wl-row:where(:not(.open)) .c-wl-more::after { transition:none; }
}

/* Search: isolated thumbnail, with the three decision metrics grouped on the right. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) { grid-template-columns:76px minmax(0,1fr) 36px; gap:0 10px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions { width:36px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions > :is(.sr-watch,.ap-btn) { width:36px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures { grid-column:2/-1; grid-row:2; grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr) minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; margin-top:9px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-left, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-left { display:flex; grid-column:3; grid-row:1/span 2; align-self:start; flex-direction:column; gap:3px; margin:0; padding:0; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-left > .c-fig-k, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-left > .c-fig-k { display:block; position:static; width:auto; height:auto; clip:auto; overflow:visible; margin:0; font-size:8px; line-height:1.3; letter-spacing:.02em; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-left :is(b,.c-wl-at,.sr-countdown-clock), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-left :is(b,.c-wl-at,.sr-countdown-clock) { display:none; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-in, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-in { display:block; font-size:13px; line-height:1.25; font-weight:500; white-space:normal; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-bid > .c-fig-k, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-bid > .c-fig-k { font-size:8px; letter-spacing:.02em; white-space:nowrap; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-bid, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-bid { font-size:14px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-margin, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-margin { grid-column:2; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-marg-label, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-marg-label { font-size:8px; letter-spacing:.02em; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .marg-pill, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .marg-pill { font-size:13px !important; }
}

@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) { grid-template-columns:76px minmax(0,1fr); grid-template-rows:auto auto auto; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions { grid-column:2; grid-row:3; flex-direction:row; justify-self:end; width:auto; margin-top:4px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions > :is(.sr-watch,.ap-btn) { height:36px; min-height:36px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row.open .sr-quick-details { grid-row:4; }
}

.sr-margin-empty { display:none; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-margin-empty, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-margin-empty { display:flex; flex-direction:column; grid-column:2; grid-row:1/span 2; align-self:start; gap:3px; font-size:13px; line-height:1.25; color:var(--wlc-muted,var(--muted)); }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures:has(.c-wl-margin) .sr-margin-empty, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures:has(.c-wl-margin) .sr-margin-empty { display:none; }
}

/* Compact Search: full-height portrait and controls at the top right. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) { grid-template-columns:76px minmax(0,1fr) 36px; grid-template-rows:auto auto; column-gap:10px; padding:0 10px 0 0; overflow:hidden; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-gal, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-gal { grid-column:1; grid-row:1/span 2; align-self:stretch; width:76px; position:relative; min-height:104px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .wlg, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .wlg { position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .wlg-img, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .wlg-img { height:100%; object-fit:cover; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-text, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-text { grid-column:2; grid-row:1; padding-top:10px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions { grid-column:3; grid-row:1; align-self:start; justify-self:end; flex-direction:column; width:36px; margin:2px 0 0; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions > :is(.sr-watch,.ap-btn) { width:36px; height:36px; min-height:36px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures { grid-column:2/-1; grid-row:2; margin:8px 0 10px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row.open { padding-bottom:0; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row.open .sr-quick-details { grid-row:3; margin:0 10px; padding:12px 0 0; }
}

/* Wider Search portrait with a horizontal pair of controls. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) { grid-template-columns:clamp(96px,27vw,128px) minmax(0,1fr); }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-gal, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-gal { width:100%; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-text, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-text { grid-column:2; padding-top:38px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions { grid-column:2; grid-row:1; flex-direction:row; width:auto; margin:0; z-index:1; }
}
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.85fr); }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-left, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-left { grid-column:2; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row :is(.c-wl-margin,.sr-margin-empty), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) :is(.c-wl-margin,.sr-margin-empty) { grid-column:3; }
}

/* Align the title and controls along the same top edge. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-text, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-text { padding-top:10px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-title-phone, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-title-phone { padding-right:72px; min-height:36px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions { margin-top:2px; }
}

/* Uniform mobile Search portraits and compact headers. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) { grid-template-columns:104px minmax(0,1fr); grid-template-rows:80px 48px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-gal, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-gal { width:104px; height:128px; min-height:128px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .wlg, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .wlg { width:104px; height:128px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-text, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-text { min-width:0; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-meta, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-meta { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures { margin-top:4px; }
}

/* Compact 62:38 split: recorded watch facts, then comparable value. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row.open .sr-quick-details { grid-template-columns:minmax(0,1.618fr) minmax(0,1fr); column-gap:0; padding-top:12px; }
  .sr-quick-watch { min-width:0; padding-right:12px; }
  .sr-quick-comp { min-width:0; padding-left:12px; border-left:1px solid var(--wlc-hair,var(--fill)); }
  .sr-quick-label { display:block; margin-bottom:7px; font-size:9px; line-height:1.3; letter-spacing:.04em; text-transform:uppercase; }
  .sr-quick-watch dl { margin:0; }
  .sr-quick-watch dl > div { display:flex; flex-wrap:wrap; column-gap:6px; margin-bottom:4px; }
  .sr-quick-watch dt { font-size:11px; }
  .sr-quick-watch dd { margin:0; font-size:11px; color:var(--wlc-ink,var(--ink)); overflow-wrap:anywhere; }
  .sr-quick-details p { margin:4px 0 0; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
  .sr-quick-comp b { font-size:16px; overflow-wrap:anywhere; }
  .sr-quick-watch a { display:inline-flex; align-items:center; min-height:36px; margin-top:4px; color:var(--wlc-ink,var(--ink)); text-decoration:none; font-size:11px; }
}

@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row.open .sr-quick-details { grid-template-columns:minmax(0,1fr); gap:10px; padding-bottom:12px; }
  .sr-detail-tabs { display:flex; gap:18px; border-bottom:1px solid var(--wlc-hair,var(--fill)); }
  .sr-detail-tabs button { border:0; border-bottom:2px solid transparent; background:none; padding:0 2px 9px; color:var(--wlc-muted,var(--muted)); font:500 12px/1.3 var(--sans); min-height:36px; }
  .sr-detail-tabs button[aria-selected="true"] { color:var(--wlc-ink,var(--ink)); border-bottom-color:currentColor; }
  .sr-detail-panel { min-width:0; }
  .sr-detail-panel .sr-quick-watch { padding:0; }
  .sr-mini-chart.c-ls { gap:6px; }
  .sr-mini-summary { display:flex; align-items:baseline; gap:10px; }
  .sr-mini-summary span { font-size:11px; }
  .sr-mini-chart .c-ls-svg { display:block; width:100%; height:auto; max-height:200px; }
  .sr-mini-dot { fill:var(--ls-sale); stroke:var(--desk); stroke-width:1; }
  .sr-mini-chart p { font-size:10px; }
}

@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  .sr-about-description { color:var(--wlc-ink,var(--ink)); }
  .sr-about-facts { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:10px; font-size:11px; line-height:1.4; }
  .sr-about-facts > span { display:inline-flex; align-items:baseline; gap:4px; }
  .sr-about-status.yes > span { color:var(--green,var(--wlc-ink,var(--ink))); }
  .sr-about-status small { font-size:10px; color:var(--wlc-muted,var(--muted)); }
}

@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  /* 19 October 2026 (Carl: the reference, Box and Papers "should be in line with the 'View at...' line in mobile not hugging the about information"):
     the description takes its own line; the facts and View at share the next one, facts at the left, the link at the right, centred on each other */
  .sr-detail-panel .sr-quick-watch { display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; }
  .sr-detail-panel .sr-quick-watch > .sr-about-description { flex:0 0 100%; }
  .sr-detail-panel .sr-quick-watch > .sr-about-facts { flex:1 1 auto; min-width:0; }
  .sr-quick-watch .sr-about-view { flex:none; margin-left:auto; margin-top:8px; }
  .sr-comps-split { display:grid; grid-template-columns:minmax(0,1.618fr) minmax(0,1fr); gap:12px; align-items:start; }
  .sr-comps-split .sr-mini-chart { min-width:0; }
  .sr-comps-split .sr-mini-summary { flex-direction:column; gap:2px; }
  .sr-comps-split .c-ls-svg { width:100%; height:150px; }
  .sr-comp-previews { min-width:0; max-height:210px; overflow-y:auto; overscroll-behavior:contain; border-left:1px solid var(--wlc-hair,var(--fill)); padding-left:10px; scrollbar-width:thin; }
  .sr-comp-preview { display:flex; flex-direction:column; gap:3px; padding:0 0 9px; margin-bottom:9px; border-bottom:1px solid var(--wlc-hair,var(--fill)); color:var(--wlc-ink,var(--ink)); text-decoration:none; }
  .sr-comp-preview img { width:100%; height:52px; object-fit:cover; border-radius:3px; }
  .sr-comp-preview b { font-size:12px; }
  .sr-comp-preview > span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:10px; line-height:1.3; }
  .sr-comp-preview small { font-size:9px; color:var(--wlc-muted,var(--muted)); }
}

.sr-sale-hit { fill:transparent; }
.sr-sale-point { cursor:pointer; }
.sr-sale-point:focus { outline:none; }
.sr-sale-point:focus .sr-mini-dot, .sr-sale-point:hover .sr-mini-dot { stroke:var(--ink); stroke-width:2; }
.sr-sale-dialog { box-sizing:border-box; width:min(300px,calc(100vw - 40px)); max-height:70dvh; overflow:auto; padding:20px; border:1px solid var(--fill); border-radius:8px; background:var(--desk); color:var(--ink); box-shadow:0 14px 45px #0004; }
.sr-sale-dialog::backdrop { background:#0005; }
.sr-sale-close { position:absolute; right:6px; top:6px; width:36px; height:36px; border:0; border-radius:4px; background:var(--desk); color:var(--ink); font-size:24px; cursor:pointer; }
.sr-sale-dialog img { display:block; width:100%; height:130px; object-fit:contain; margin:12px 0; }
.sr-sale-dialog h3 { margin:12px 26px 10px 0; font-size:20px; line-height:1.15; }
.sr-sale-dialog > b { font:500 18px/1.3 var(--sans); }
.sr-sale-dialog p, .sr-sale-dialog a { font:400 12px/1.4 var(--sans); }
.sr-sale-dialog a { display:block; text-align:right; margin-top:12px; color:inherit; }

/* A light-dismiss sale card beside its plotted point, with no modal overlay. */
.sr-sale-dialog { position:fixed; inset:auto; margin:0; width:190px; max-height:260px; padding:12px; border-radius:6px; }
.sr-sale-dialog::backdrop { background:transparent; }
.sr-sale-dialog img { height:70px; margin:4px 0 8px; }
.sr-sale-dialog h3 { font-size:16px; margin:8px 22px 6px 0; }
.sr-sale-dialog > b { font-size:15px; }
.sr-sale-dialog p, .sr-sale-dialog a { font-size:11px; }
.sr-sale-close { width:28px; height:28px; font-size:20px; right:2px; top:2px; }

.sr-range-chart .sr-range-svg { display:block; width:100%; height:auto; overflow:visible; }
.sr-range-svg text { fill:var(--ls-axis); font:10px var(--sans); }
.sr-range-track { stroke:var(--ls-grid); stroke-width:2; }
.sr-range-band { fill:var(--ls-band); fill-opacity:.13; }
.sr-range-median { stroke:var(--ls-value); stroke-width:2; }
.sr-range-bid { fill:var(--ls-bid); }
.sr-range-bid-line { stroke:var(--ls-bid); stroke-width:1.5; stroke-dasharray:3 3; }
.sr-range-chart.c-ls { gap:4px; }
.sr-range-chart .sr-mini-summary { gap:8px; }

/* Compact supporting comps: shallow photos, price, single-line title and date. */
.sr-comp-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:12px; }
.sr-comp-tile { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--wlc-hair,var(--fill)); border-radius:10px; background:var(--desk); color:var(--wlc-ink,var(--ink)); text-decoration:none; container-type:inline-size; }
.sr-comp-photo { display:grid; place-items:center; width:100%; aspect-ratio:2.2; max-height:108px; overflow:hidden; background:var(--subtle); color:var(--wlc-muted,var(--muted)); }
.sr-comp-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sr-comp-no-photo { display:flex; flex-direction:column; align-items:center; gap:4px; font:400 clamp(9px,5cqi,12px)/1.3 var(--sans); }
.sr-comp-no-photo svg { width:clamp(16px,12cqi,28px); height:auto; }
.sr-comp-caption { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; padding:12px; }
.sr-quick-details .sr-comp-caption .sr-comp-price { display:block; margin:0; font:650 clamp(12px,10cqi,23px)/1.15 var(--sans); letter-spacing:-.04em; overflow-wrap:anywhere; }
.sr-comp-caption .sr-comp-name { display:block; width:100%; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:400 clamp(9px,5cqi,14px)/1.35 var(--sans); color:var(--wlc-ink,var(--ink)); }
.sr-comp-caption .sr-comp-date { margin-top:auto; padding-top:2px; font:400 clamp(8px,4.5cqi,12px)/1.4 var(--sans); color:var(--wlc-muted,var(--muted)); }
.sr-comp-tile:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  .sr-comp-gallery { gap:8px; }
  .sr-comp-caption { gap:4px; padding:8px; }
}

/* Bring the mobile tab underline closer to its label. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  .sr-detail-tabs button { min-height:28px; padding-bottom:2px; }
}

/* Keep the auction house closely attached to the watch title on mobile. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat,.wl-lots) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-meta { margin-top:1px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-title-phone, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-title-phone { min-height:0; }
}

/* A consistent spacing rhythm within the existing mobile Search layout. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) { column-gap:12px; padding-right:12px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-text, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-text { padding-top:12px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures { column-gap:8px; margin:4px 0 8px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions { margin-top:4px; gap:0; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row.open .sr-quick-details { margin:0 12px; padding:8px 0 12px; row-gap:8px; }
  .chat .sr-detail-tabs { gap:20px; }
  .chat .sr-detail-tabs button { padding-inline:2px; padding-bottom:2px; }
  .chat .sr-detail-panel .sr-about-description { margin:0; line-height:1.5; }
  .chat .sr-about-facts { margin-top:8px; gap:6px 12px; }
  .chat .sr-quick-watch .sr-about-view { margin-top:8px; }
}

/* Approved premium Search mockup: inset photography, editorial type and divided metrics. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) { grid-template-columns:clamp(80px,23vw,148px) minmax(0,1fr); grid-template-rows:minmax(98px,auto) auto; column-gap:12px; row-gap:0; padding:12px; border:1px solid #e6e4e1; border-radius:var(--r1); background:var(--desk,#fff); box-shadow:0 6px 18px rgb(32 30 29 / 6%); overflow:hidden; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-gal, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-gal { width:100%; height:100%; min-height:156px; grid-row:1 / span 2; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .wlg, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .wlg { width:100%; height:100%; border-radius:var(--r1); overflow:hidden; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .wlg-img, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .wlg-img { width:100%; height:100%; object-fit:cover; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-text, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-text { padding:0; min-width:0; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-title-phone, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-title-phone { padding:0 70px 0 0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(17px,3.4vw,25px); font-weight:600; line-height:1.16; letter-spacing:-.025em; -webkit-line-clamp:unset; overflow-wrap:normal; min-height:36px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-meta, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-meta { display:block; margin:8px 0 12px; font-size:clamp(11px,2.2vw,15px); line-height:1.35; color:var(--muted,#626262); }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions { margin:0; gap:6px; width:auto; flex-direction:row; align-self:start; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions > :is(.sr-watch,.ap-btn) { width:32px; height:36px; min-height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e6e4e1; border-radius:var(--r1); background:transparent; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn) svg, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions > :is(.sr-watch,.ap-btn) svg { width:18px; height:18px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures { grid-column:2; grid-row:2; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.85fr); grid-template-rows:auto auto; column-gap:8px; row-gap:8px; padding:12px 0 0; margin:0; border-top:1px solid #e6e4e1; align-self:end; align-items:start; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-bid > .c-fig-k, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-bid > .c-fig-k { font:500 clamp(7px,1.5vw,10px)/1.3 var(--sans); letter-spacing:.07em; white-space:nowrap; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-bid, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-bid { font:600 clamp(13px,2.8vw,22px)/1.25 var(--sans); letter-spacing:-.035em; white-space:nowrap; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-left, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-left { gap:8px; border-left:1px solid #e6e4e1; padding-left:8px; align-self:stretch; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-left > .c-fig-k, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-left > .c-fig-k { font:500 clamp(7px,1.5vw,10px)/1.3 var(--sans); letter-spacing:.07em; white-space:nowrap; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-in, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-in { font:500 clamp(13px,2.8vw,22px)/1.25 var(--sans); white-space:nowrap; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row :is(.c-wl-margin,.sr-margin-empty), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) :is(.c-wl-margin,.sr-margin-empty) { gap:8px; border-left:1px solid #e6e4e1; padding-left:8px; align-self:stretch; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-marg-label, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-marg-label { font:500 clamp(7px,1.5vw,10px)/1.3 var(--sans); letter-spacing:.07em; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .marg-pill, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .marg-pill { display:inline-flex; align-items:center; justify-content:center; padding:4px 6px !important; border-radius:var(--r1); background:color-mix(in srgb,currentColor 12%,transparent) !important; font-size:clamp(12px,2.5vw,20px) !important; font-weight:600; line-height:1.2 !important; white-space:nowrap; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row.open { padding-bottom:12px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row.open .sr-quick-details { margin:12px 0 0; padding:12px 0 0; }
}

/* 18 October 2026 (Carl, item.png: "Ensure exact details match the image provided"): the details of the mockup the block
   above left out. The title in the app's condensed serif, thickened; the three labels one size and tracking; the bid bold and
   Closes in the same size; the bookmark and bell square; the Margin a soft rounded pill (its colour stays margin-color.js's). */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-title-phone, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-title-phone { font-family:var(--serif); font-size:clamp(21px,4.4vw,32px); font-weight:400; line-height:1.04; letter-spacing:-.01em; -webkit-text-stroke:.035em currentColor; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-meta, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-meta { margin:6px 0 12px; font-size:clamp(12px,2.6vw,16px); }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions > :is(.sr-watch,.ap-btn) { width:36px; height:36px; min-height:36px; border-radius:var(--r1); }
  /* 18 October 2026 (Carl, a crop: "a bit of overlap"): the title's right padding is the two 36px buttons, their 6px gap and 8px of
     air (it was 70px, from the 32px buttons); a word longer than the column breaks rather than running under them. */
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-title-phone, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-title-phone { padding-right:calc(36px * 2 + 6px + 8px); overflow-wrap:break-word; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures :is(.c-fig-k,.c-marg-label), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures :is(.c-fig-k,.c-marg-label) { margin:0; font:500 clamp(8px,1.7vw,11px)/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--wlc-muted,var(--muted)); white-space:nowrap; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures { grid-template-rows:auto 1fr; } /* the Closes in and Margin columns span both rows: their extra height goes below the bid, not between it and its label */
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures .c-wl-bid > .sr-bid, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures .c-wl-bid > .sr-bid { align-self:start; margin:0; font:700 clamp(17px,3.6vw,26px)/1.2 var(--sans); letter-spacing:-.03em; } /* .c-wl-figures .c-wl-bid: to outrank the :is() rules above */
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-in, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-in { font-weight:500; font-size:clamp(17px,3.6vw,26px) !important; line-height:1.2 !important; letter-spacing:0; } /* !important: an earlier phone rule sets 15px !important */
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .marg-pill, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .marg-pill { margin-top:-4px; padding:5px 10px !important; border-radius:var(--r1) !important; font-size:clamp(15px,3.2vw,24px) !important; font-weight:700 !important; letter-spacing:-.02em; } /* !important: the pill's inline style (chat.js PILL_BASE) and an earlier phone rule */
}

/* 18 October 2026 (Carl, a crop of item.png: "Spacing of these elements is not exact"): the metrics row's spacing taken from the
   image, in units of the figure size (--v), so it holds at every phone width. Measured on item.png: columns 38.9 / 32.2 / 28.9% of
   the row, each label 5.7% / 6.6% of the row in from its rule; the hairline to the labels' cap 1.02 caps of a figure, the labels to
   the figures 0.69; the rules start just above the labels; the pill 1.74 caps tall with its number centred on the figures. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures { --v:clamp(17px,3.6vw,26px); grid-template-columns:38.9fr 32.2fr 28.9fr; column-gap:0; row-gap:var(--mg-gap); padding-top:var(--mg-top); --mg-top:calc(var(--v) * .56); --mg-gap:calc(var(--v) * .2); }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures :is(.c-fig-k,.c-marg-label), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures :is(.c-fig-k,.c-marg-label) { line-height:1.1; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures .c-wl-bid > .sr-bid, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures .c-wl-bid > .sr-bid { margin-right:8px; } /* a long bid (CHF 41,600) widens its column rather than touching the rule: the fr column's minimum is its content */
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures .c-wl-left, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures .c-wl-left { gap:var(--mg-gap); padding-left:17.7%; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures .c-wl-margin, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures .c-wl-margin { gap:var(--mg-gap); padding-left:22.8%; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures .marg-pill, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures .marg-pill { align-self:flex-start; margin-top:0; padding:calc(var(--v) * .16) calc(var(--v) * .45) !important; border-radius:var(--r1) !important; font-size:calc(var(--v) * .78) !important; line-height:1.2 !important; }
}

/* 18 October 2026 (Carl, a crop of item.png's top: "the spacing on top isn't aligned with save and alert buttons, also there's too
   much gap between the auction house line and name of watch"; iPhones). From the image: the buttons sit 0.13 of their height below
   the photo's top, the title's first capital 0.33 of a button below the buttons' top, and the house line's capitals 0.77 of a
   title capital under the title's last line. A one-line title no longer holds a two-line height (min-height 36px above). */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-actions { margin-top:5px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-text, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-text { padding-top:14px; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .sr-title-phone, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .sr-title-phone { min-height:0; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-meta, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-meta { margin-top:4px; }
}

/* 18 October 2026 (Carl: "image is a bit tall which is stretching card. Should be correct size to match the gap in middle of the image
   between top and bottom text elements"): the photo no longer sets the card's height (it held 156px, and the text column a 98px first
   row, so a short title left a gap above the hairline). The text sets the height; the photo fills it, from 5px above the buttons to 8px
   below the metric rules, as item.png has it (0.13 and 0.22 of a button). */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) { grid-template-rows:auto auto; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-gal, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-gal { height:auto; min-height:0; align-self:stretch; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures { margin-bottom:8px; }
}

/* 18 October 2026 (Carl, a crop of a phone card: "Text on mobile for time is a bit overflowing ... condense so no matter what format
   it always stays within its range"): "10 h 59 min" ran past the Closes in cell into the Margin's rule. The cell is a size container
   and the span is condensed ("10h 59m", lot-card.js spanOnly); its size is the figure size or what fits the cell, whichever is
   smaller: 4.1em holds the longest span, "23h 59m". The label ("Closes in", "Starts in") fits the same way. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures .c-wl-left, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures .c-wl-left { container-type:inline-size; min-width:0; }
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures .c-wl-left .c-wl-in, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures .c-wl-left .c-wl-in { font-size:min(var(--v), 100cqi / 4.1) !important; } /* !important: the size rules above use it */
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-figures .c-wl-left > .c-fig-k, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) .c-wl-figures .c-wl-left > .c-fig-k { font-size:min(clamp(8px,1.7vw,11px), 100cqi / 6.4); }
}

/* Compact mobile calendar: dates and two sessions share the first screen. */
.cal-month-fold { display:none; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #calendar.pane { padding:4px 16px 16px; }
 #calendar .cal-head { padding:0; border:0; gap:4px 8px; }
 #calendar .cal-head h2 { font-size:23px; min-width:0; }
 #calendar .cal-pick-size { display:none; }
 #calendar .cal-nav { gap:4px; }
 #calendar .cal-nav .cal-btn { width:30px; height:36px; min-width:0; }
 #calendar .cal-nav .cal-btn.wide { min-width:52px; padding:0 8px; }
 #calendar .cal-subline { font-size:11px; line-height:16px; }
 #calendar .cal-modes { flex:0 0 auto; margin:6px 0; }
 #calendar .cal-modes .cal-btn, #calendar .cal-modes .cal-btn:hover { height:32px; padding:0 14px; font-size:12px; }
 #calendar .cal-filters { position:relative; padding:0; border:0; gap:8px; margin:0 0 8px; }
 #calendar .cal-filters .cf.grow { flex-basis:100%; }
 #calendar .cal-ftoggle { position:absolute; right:0; top:-44px; width:auto; height:32px; font-size:12px; padding:0 10px; }
 #calendar .cal-ftoggle > span:not(.k) { display:inline; }
 #calendar .cf input[type="search"] { height:38px; }
 #calendar .pano.ledger-layout { padding:0; }
 #calendar .pano-cal { display:flex; flex-direction:column; border:0; border-radius:0; }
 #calendar .pano-dow { padding:6px 0 2px; height:22px; }
 #calendar .ledger-layout .pano-grid { grid-template-rows:repeat(var(--pano-rows,5),40px); border:0; gap:0; }
 #calendar .pcell { border:0; padding:2px; border-radius:7px; background:transparent; min-height:0; }
 #calendar .pcell .pnum { font-size:14px; height:20px; line-height:20px; }
 #calendar .pcell .pcount { margin:0; color:var(--heat-ink,#00788b); }
 #calendar .pcell .pcount b { font-size:10px; line-height:12px; }
 #calendar .pcell.today { box-shadow:inset 0 0 0 1px var(--blue); color:var(--blue); }
 #calendar .pcell.selected, #calendar .pcell.selected:hover { background:var(--blue); color:white; box-shadow:none; }
 #calendar .pcell.selected .pcount { color:white; }
 #calendar .pano-legend { display:none; }
 #calendar .cal-month-fold { display:block; order:3; width:100%; padding:6px; height:30px; border:0; border-bottom:1px solid var(--fill); background:none; color:var(--muted); font:400 11px var(--sans); }
 #calendar .cal-fold-show { display:none; }
 #calendar.month-folded .pano-dow, #calendar.month-folded .pano-grid, #calendar.month-folded .cal-fold-hide { display:none; }
 #calendar.month-folded .cal-fold-show { display:inline; }
 #calendar .ledger-layout .pano-detail { margin:0; padding:0; border:0; }
 #calendar .ledger-layout .pano-day { display:grid; grid-template-columns:1fr auto; gap:2px 8px; padding:10px 0 8px; background:none; box-shadow:none; border:0; }
 #calendar .pano-eyebrow { font-size:9px; line-height:12px; grid-column:1; }
 #calendar .ledger-layout .pano-headline { font-size:22px; line-height:25px; margin:0; grid-column:1; }
 #calendar .pano-count { grid-column:2; grid-row:1 / span 2; align-self:center; margin:0; font-size:11px; }
 #calendar .ledger-layout .pano-detail[data-state="day"] .pano-sessions { display:block; padding:0; }
 #calendar:not(.filters-expanded) .ledger-tools, #calendar:not(.filters-expanded) .ledger-kw { display:none; }
 #calendar .ledger-columns { display:none; }
 #calendar .ledger-layout .pcards { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:0; }
 #calendar .ledger-layout .pcards > li.session-preview-row { display:grid; grid-template-columns:minmax(0,1fr) 32px; gap:4px 8px; padding:8px 10px; border:1px solid var(--fill); border-radius:10px; }
 #calendar .ledger-layout .session-preview-row > .pcard { display:flex; flex-direction:column; gap:2px; grid-column:1; padding:0; border:0; min-height:0; }
 #calendar .ledger-layout .pcard-time { color:var(--blue); font-size:11px; line-height:14px; }
 #calendar .ledger-layout .pcard-title { font-size:14px; line-height:18px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }
 #calendar .ledger-layout .pcard-meta { font-size:11px; line-height:15px; }
 #calendar .ledger-layout .pcard-tags { font-size:10px; line-height:13px; }
 #calendar .session-preview-row > .ledger-save { grid-column:2; grid-row:1; width:32px; height:32px; margin:0; }
 #calendar .session-preview-row > .cal-peek { grid-column:1 / -1; margin:0; justify-self:start; }
 #calendar .cal-peek-th, #calendar .cal-peek-more { width:32px; height:32px; font-size:9px; }
 #calendar .session-preview-row > .session-preview { grid-column:1 / -1; }
}

@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #calendar .ledger-layout .pcell { padding:2px; background:transparent !important; }
 #calendar .ledger-layout .pcell.blank { background:transparent !important; }
 #calendar .ledger-layout .pcell.today { color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
 #calendar .ledger-layout .pcell.selected { background:#3154d5 !important; color:white; box-shadow:none; }
 #calendar .ledger-layout .pcell.selected .pnum, #calendar .ledger-layout .pcell.selected .pcount { color:white; }
 #calendar .session-preview-row > .cal-peek:not([hidden]) { display:flex; }
 #calendar .ledger-layout .pcards > li.session-preview-row { background:var(--desk); }
}
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #calendar .ledger-layout .pano-grid { background:var(--desk); }
 #calendar .ledger-layout .pano-detail { gap:0; }
 #calendar .ledger-layout .pano-count { font:600 11px/15px var(--sans); margin:0; }
 #calendar .ledger-layout .pano-eyebrow { font-size:10px; line-height:12px; }
 #calendar .ledger-layout .pcards > li.session-preview-row { padding:6px 10px; }
 #calendar .cal-peek-th, #calendar .cal-peek-more { width:28px; height:28px; }
}
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #calendar .ledger-layout .pcell.today:not(.selected) .pnum { color:#3154d5; }
}

/* 18 October 2026 (Carl, plot.png, a mockup of the phone Calendar: "ensure that every detail of this is exactly matched"): the Calendar's top, from the
   screen's edge to just above the weekday row, drawn to the mockup (a 427px phone at 2x, measured in pixels). Where the mockup and the app's rules differ the
   rules win: corners are --r1 where the mockup rounds to ~8px (the account disc stays 50%), and the search box's typed text stays 16px (an input under 16px makes
   iOS zoom the page), so only its placeholder is the mockup's size. The title bar is the Calendar's alone (.main:has(#calendar): Search and the Watchlist keep theirs;
   drop that prefix to give every phone page this bar). The month grid below the search box is its own block. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  /* The title bar: no hairline under it, a taller serif "Calendar" with the tile before it, and the account button a grey disc with a person (the picked mark
     stays in the menu); the button keeps its 44px target, the disc is 32px inside it. */
  .main:has(#calendar) > .hdr { padding: max(7px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); border-bottom: 0; }
  .main:has(#calendar) .crumb { gap: 15px; font-size: 32.5px; letter-spacing: 0; -webkit-text-stroke: .012em currentColor; }
  .main:has(#calendar) .crumb::before { width: 31px; height: 31px; border-radius: var(--r1); }
  .main:has(#calendar) .crumb .root { position: relative; top: 2px; }
  .main:has(#calendar) .hdr-account { --person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='16' cy='12.5' r='2.75'/%3E%3Cpath d='M10.4 21.75v-.5a4 3.5 0 0 1 4-3.5h3a4 3.5 0 0 1 4 3.5v.5'/%3E%3C/svg%3E"); margin-right: -6px; background: transparent; }
  .main:has(#calendar) .hdr-account auc-mark { display: none; }
  .main:has(#calendar) .hdr-account::before, .main:has(#calendar) .hdr-account::after { content: ""; grid-area: 1 / 1; width: 32px; height: 32px; }
  .main:has(#calendar) .hdr-account::before { border-radius: 50%; background: color-mix(in srgb, var(--ink) 6%, var(--desk)); }
  .main:has(#calendar) .hdr-account::after { background: var(--body); -webkit-mask: var(--person) center / 32px 32px no-repeat; mask: var(--person) center / 32px 32px no-repeat; }
  .main:has(#calendar) .hdr-account:focus-visible { outline-offset: -4px; }
  .main:has(#calendar) .acct-menu:not([hidden]) { right: max(18px, env(safe-area-inset-right)); }

  /* The month: the serif title (32.5px, the bar's size) with its chevron, and the stepper (40 x 37 steps, Today 72). The title's word and letter spacing and the 1px
     nudges on the two serif titles are the mockup's, measured; the strokes are the hairline the lot titles take (.012em) to match its heavier cut. */
  #calendar .cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 3px 2px 0; padding: 0; }
  #calendar .cal-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; font: 400 clamp(23px, calc((100vw - var(--cal-fit, 242px)) / 5.6), 32.5px)/37px var(--serif); letter-spacing: .009em; word-spacing: 3px; -webkit-text-stroke: .012em currentColor; }
  #calendar .cal-pick-v { gap: 5px; }
  #calendar #cal-title { position: relative; top: 1px; }
  #calendar .cal-pick-i { width: 23px; height: 23px; margin-top: 0; stroke-width: 1.65; color: var(--body); }
  #calendar .cal-nav { gap: 5px; }
  #calendar .cal-nav .cal-btn { width: 40px; height: 37px; border-color: rgba(32,30,29,.1); font: 400 12.5px/1 var(--sans); }
  #calendar .cal-nav .cal-btn.wide { width: auto; min-width: 72px; margin-right: 1px; padding: 0 14px; font: 400 12.5px/1 var(--sans); }
  #calendar .cal-nav .cal-btn.wide:not(:disabled) { background-color: var(--tint); border-color: color-mix(in srgb, var(--blue) 25%, transparent); }
  /* ‹ › are drawn, not typed: two chevrons (the glyph is hidden, a mask is its stroke in the button's ink). */
  #calendar .cal-nav .cal-btn:not(.wide) { display: flex; align-items: center; justify-content: center; color: var(--body); font-size: 0; }
  #calendar .cal-nav .cal-btn:not(.wide)::before { content: ""; width: 8px; height: 12px; background: currentColor; -webkit-mask: var(--chev) center / 8px 12px no-repeat; mask: var(--chev) center / 8px 12px no-repeat; }
  #calendar .cal-nav .cal-btn:first-child { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M5.9 2.25 2.4 6l3.5 3.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  #calendar .cal-nav .cal-btn:last-child { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M2.1 2.25 5.6 6 2.1 9.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

  /* A phone under 410px wide has no room for the 32.5px title beside the full stepper ("September 2026" is 5.6 times its size, plus the chevron): the title takes the room the stepper leaves (--cal-fit is the width that is not the title), and the stepper narrows by 19px. */
  @media (max-width: 409px) {
    #calendar .cal-head { --cal-fit: 223px; }
    #calendar .cal-nav { gap: 4px; }
    #calendar .cal-nav .cal-btn { width: 36px; }
    #calendar .cal-nav .cal-btn.wide { min-width: 64px; margin-right: 0; padding: 0 10px; }
  }

  /* The sub-line: 12px, up from 11, with the mockup's wider spaces. */
  #calendar .cal-subline { margin: 2px 0 0; font: 400 12px/16px var(--sans); word-spacing: 1.3px; }

  /* Month / Agenda: a 36px track, the mode on screen solid blue to the track's edge (the calendar's own solid blue: --cal-solid where the month grid sets one, else the
     #3154d5 its selected day already wears above), the other dark grey on the pale track. */
  #calendar .cal-modes { display: flex; flex: 0 0 auto; height: 36px; margin: 11px 0 0; padding: 0; border: 0; border-radius: var(--r1); background: color-mix(in srgb, var(--ink) 5%, var(--desk)); box-shadow: inset 0 0 0 1px rgba(32,30,29,.12); }
  #calendar .cal-modes .cal-btn, #calendar .cal-modes .cal-btn:hover { position: relative; flex: 0 0 auto; min-width: 72px; height: 36px; padding: 2px 16px 0; border-radius: var(--r1); font: 400 12.5px/1 var(--sans); }
  #calendar .cal-modes .cal-btn:not(.on), #calendar .cal-modes .cal-btn:not(.on):hover { color: var(--body); }
  #calendar .cal-modes .cal-btn.on, #calendar .cal-modes .cal-btn.on:hover { background: var(--cal-solid, #3154d5); color: #fff; box-shadow: none; }

  /* Filters sits on the Month / Agenda line (at the right), and the search box under both. */
  #calendar .cal-filters { margin: 11px 2px 0; }
  #calendar .cal-ftoggle { top: -47px; height: 36px; gap: 11px; padding: 2px 11px 0 14px; font: 400 12.5px/1 var(--sans); }
  #calendar .cal-ftoggle svg { width: 14px; height: 14px; }
  #calendar .cal-ftoggle { width: 44px; padding: 0; } #calendar .cal-ftoggle > span:not(.k) { display: none; } /* 19 October 2026 (Carl: "The filters button in mobile should be a filters icon rather than the word filters"): the icon only at every phone width (was below 390px); the name stays in aria-label */
  #calendar .cal-filters .cf input[type="search"] { height: 39px; padding: 0 14px 4px 39px; background-image: none; }
  #calendar .cal-filters .cf:not(.set) input[type="search"] { background-color: var(--subtle); }
  #calendar .cal-filters .cf input[type="search"]::placeholder { font-size: 12.8px; }
  #calendar .cal-filters .cf.grow::before { --lens: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6'/%3E%3Cpath d='M10.4 10.4L14 14'/%3E%3C/svg%3E"); content: ""; position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; background: var(--body); pointer-events: none; -webkit-mask: var(--lens) center / 17px 17px no-repeat; mask: var(--lens) center / 17px 17px no-repeat; }

  /* 44px targets behind the smaller drawn buttons: an empty box that reaches past each (a press on it is a press on the button; the search label hands a press to its box). */
  #calendar .cal-nav { position: relative; z-index: 1; } /* above the sub-line under it, which would take a press on the buttons' lower edge */
  #calendar .cal-nav .cal-btn { position: relative; }
  #calendar .cal-nav .cal-btn::after, #calendar .cal-modes .cal-btn::after, #calendar .cal-ftoggle::after { content: ""; position: absolute; inset: -4px -3px; } /* from the padding edge, which is inside the 1px border: about 44 x 44 for the 40 x 37 steppers */
  #calendar .cal-modes .cal-btn::after { inset: -4px 0; }
  #calendar .cal-ftoggle::after { inset: -5px -3px; }
  #calendar .cal-filters .cf.grow { margin: -2px 0; padding: 2px 0; }
  /* Forced colours: a mask is painted in the background colour, which they replace with the page's, so the drawn glyphs are kept in the text colour; the track's edge was a
     shadow, which they drop, so it is an outline; and the mode on screen is the system's highlight. */
  @media (forced-colors: active) {
    #calendar .cal-nav .cal-btn:not(.wide)::before, .main:has(#calendar) .hdr-account::after, #calendar .cal-filters .cf.grow::before { background: CanvasText; forced-color-adjust: none; }
    #calendar .cal-modes { outline: 1px solid CanvasText; outline-offset: -1px; }
    #calendar .cal-modes .cal-btn.on, #calendar .cal-modes .cal-btn.on:hover { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  }
}

/* 18 October 2026 (Carl, plot.png: "ensure that every detail of this is exactly matched"): the phone's month grid, from the weekday
   row to Hide month, taken from the mockup (427px wide, measured at 2x). A weekday is its first letter (the markup keeps the three; the
   desktop reads them all). Every date is one regular ink whether or not it has sessions: the faded past, the 600 weight and the deep
   steps' page colour belong to the desktop's washes, which a phone does not draw. A count is a teal dot and its number. Today is a 32px
   ring round a bold date, the day shown a solid block with white numerals; a day with nothing in it gets a block the ring's size, so a
   date stays where it is when it is picked and sits in the middle of whichever it is in. A row is 46.5px (the mockup's rows run 45 to
   48). Hide month: a hairline above, the drawn chevron (calendar.js, FOLD_UP) and the label, a full-width separator below. Measured
   from the search box's lower edge: the weekday letters' centre 19.75px, the first row's top 31px (the box and the grid touch; a margin
   added under the box comes off the weekday row's 12.5px padding). */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  #calendar { --cal-solid:var(--blue-solid,var(--blue)); --cal-hair:color-mix(in srgb,var(--fill) 60%,var(--desk)); } /* --blue-solid: dark's fill blue (white text on --blue there is 2:1); the hairline is the mockup's, a little fainter than --fill */
  #calendar .pano-grid .pcell { --on-hot:var(--ink); } /* a day of 50 or more has no wash here, so its date stays ink (app.css turns it to the page colour for the deepest step) */
  #calendar .ledger-layout .pano-dow { height:31px; padding:12.5px 0 0; align-content:start; gap:0; }
  #calendar .ledger-layout .pano-dow span { font-size:0; letter-spacing:0; line-height:14px; color:var(--body); }
  #calendar .ledger-layout .pano-dow span::first-letter { font:400 11px/14px var(--sans); } /* the one letter, at 11px: the span itself is 0 */
  #calendar .ledger-layout .pano-grid { grid-template-rows:repeat(var(--pano-rows,5),46.5px); }
  #calendar .ledger-layout .pcell { padding:5px 0 0; border-radius:var(--r1); overflow:visible; isolation:isolate; } /* visible: the ring starts 1px above the cell; isolate: the ring and the block sit behind the text (z-index -1) and in front of the page */
  #calendar .ledger-layout .pano-grid .pcell .pnum { font:400 14px/20px var(--sans); height:20px; color:var(--ink); }
  #calendar .ledger-layout .pcell .pnum::after { display:none; } /* the word Today, which a cell under 95px already drops (app.css, @container pcell) */
  #calendar .ledger-layout .pcell .pcount { display:flex; align-items:center; justify-content:center; height:12px; margin:1.75px 0 0; font-size:0; color:var(--ramp-ink) !important; } /* !important: the deep steps' rules (app.css, data-heat 4 and 5) outrank this and turn the count to ink or the page colour */
  #calendar .ledger-layout .pcell .pcount::before { content:""; display:block; flex:none; width:4px; height:4px; margin-right:5px; border-radius:50%; background:var(--ramp-line); position:relative; top:-.5px; }
  #calendar .ledger-layout .pcell .pcount b { margin:0; font:500 10px/12px var(--sans); }
  #calendar .pcell .sk-calendar-cell { margin-top:0; } /* a pending count's bar sits where the count will (skeleton.css centres it in the cell's last 18px) */
  /* the day shown: a solid block (the cell's row, 2.75px in from each side) */
  #calendar .ledger-layout .pcell.selected { background:transparent !important; box-shadow:none; }
  #calendar .ledger-layout .pcell.selected::before { content:""; position:absolute; z-index:-1; left:2.75px; right:2.75px; top:0; bottom:0; border-radius:var(--r1); background:var(--cal-solid); }
  #calendar .ledger-layout .pcell.selected:not(.has)::before { top:-1px; bottom:auto; height:32px; }
  #calendar .ledger-layout .pano-grid .pcell.selected .pnum { color:#fff !important; font-weight:700; } /* !important: a Search that found nothing on this day greys its date (app.css) */
  #calendar .ledger-layout .pcell.selected .pcount { color:#fff !important; }
  #calendar .ledger-layout .pcell.selected .pcount::before { background:currentColor; } /* 18 October 2026 (Carl): the dot stays on the day shown, white like its number. 19 October (Carl: in dark mode "the dot next to it is black"): the dark theme turns a literal #fff background into its dark surface, so the dot takes its number's colour (the #fff !important above) instead */
  #calendar .ledger-layout .pano-grid .pcell.locked .pnum { color:var(--faint); }
  /* today: a ring, 32px, round the date (the date's centre is 15px down the cell); a count is moved down to clear it */
  #calendar .ledger-layout .pcell.today { box-shadow:none; color:var(--ink); }
  #calendar .ledger-layout .pcell.today:not(.selected)::before { content:""; position:absolute; z-index:-1; top:-1px; left:calc(50% - 16px); width:32px; height:32px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--blue); }
  #calendar .ledger-layout .pano-grid .pcell.today .pnum { color:var(--ink); font-weight:700; }
  #calendar .ledger-layout .pcell.today:not(.selected) .pcount { margin-top:6px; }
  #calendar .pcell.today:not(.selected) .sk-calendar-cell { margin-top:4px; }
  /* Hide month: 34.5px between its hairline and the separator under it; the separator runs the pane's full width (.pano-cal no longer clips) */
  #calendar .pano-cal { overflow:visible; }
  #calendar .cal-month-fold { position:relative; display:flex; align-items:center; justify-content:center; height:34.5px; margin-top:17.5px; padding:0 0 4px 5px; border:0; border-top:1px solid var(--cal-hair); background:none; color:var(--body); font:400 11px/16px var(--sans); }
  #calendar .cal-month-fold::after { content:""; position:absolute; left:-16px; right:-16px; bottom:0; height:1px; background:var(--cal-hair); }
  #calendar .cal-month-fold::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } /* the row is 34.5px: the empty 10px above it take the tap too, for 44 */
  #calendar .cal-fold-hide { display:inline-flex; }
  #calendar.month-folded .cal-fold-show { display:inline-flex; }
  #calendar .cal-fold-hide, #calendar.month-folded .cal-fold-show { align-items:center; gap:12px; }
  #calendar .cal-fold-i { flex:none; width:10px; height:6px; color:var(--muted); }
  #calendar.month-folded .cal-month-fold { margin-top:10px; }
}

/* 18 October 2026 (Carl, plot.png: "ensure that every detail of this is exactly matched"): the phone's tab bar is the mockup's. Three equal
   columns across the full width, each an icon with its name under it (11px in the app's sans, the size whose ink matches the mockup's labels).
   The current view sits on the wash (--tint) in a box inset from its column (94.5 x 47 css px, centred, --r1 corners like every box), with no
   rule on top; the others are --body and the current one --blue. The rule above the bar is --fill, which dark mode redefines. The bar keeps the
   home-indicator inset. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .mobile-nav { gap: 0; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border-top-color: var(--fill); }
  .mobile-nav button { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; min-height: 57px; padding: 7px 0 0; border: 0; background: transparent; color: var(--body); }
  .mobile-nav button::before { content: ""; position: absolute; z-index: -1; top: 4.5px; left: 50%; width: 94.5px; height: 47px; margin-left: -47.25px; border-radius: var(--r1); background: transparent; }
  .mobile-nav button svg { flex: none; width: 25px; height: 25px; stroke-width: 1.55; }
  .mobile-nav button span { font: 400 11px/16px var(--sans); }
  .mobile-nav button.on { background: transparent; color: var(--blue); }
  .mobile-nav button.on::before { background: var(--tint); }
}

/* 18 October 2026 (Carl, plot.png: "ensure that every detail of this is exactly matched"): the day and its sessions, as the mockup draws them
   (measured from it at 2x, written here at 1x). The heading: the day short in the serif ("Mon, 19 Oct"), the sessions at its right in bold
   teal, and "Tomorrow · Local time" in grey under it (calendar.js panoDetail writes the three, in that order, for a day with sessions and for
   one with none; the strip's other states keep their own heading). Each session is a card: the time (12-hour, blue), the title, the house and
   country in grey, then a row of three photos, "44 watch lots" (or "View session") and a chevron at the row's edge (calendar.js panoCardHtml);
   the bookmark sits at the card's top right, a 30px square in a hairline. The third line (category, type) is no longer drawn (it stays for a
   screen reader, and a stale sale's "May be out of date" still shows), and so is the "+N more" tile, since the row says how many. A card's
   corners are --r1, the app's one rounding; its hairline is the ink at 14%, so it follows the theme. The bookmark's reach stays 44px: its box
   is drawn at 30px and its press area is 7px larger on every side (::after, -8px from the padding box inside the 1px border). A tap on the
   words and the chevron opens the session, as the card does. The photos' room is held while their lots are on the way (.cal-peek[hidden]),
   so the row does not move when they land. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #calendar .ledger-layout { --day-line:color-mix(in srgb, var(--ink) 14%, transparent); --th-w:54.5px; --th-h:46px; --th-gap:6px; --go-gap:11px; }

 /* the day's side margin: the mockup's cards and heading run 18px in from the screen's edge (x 18 to 409), the pane's own padding is 16, so the
    day takes 2px more at each side, as the top block's title and search box do. If the pane's side padding ever becomes 18px, delete this line. */
 #calendar .ledger-layout .pano-detail { margin-inline:2px; }

 /* the heading */
 #calendar .ledger-layout .pano-detail:is([data-state="day"],[data-state="empty"]) .pano-day { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:0; align-items:start; padding:12.6px 0 7.25px; }
 #calendar .ledger-layout .pano-detail:is([data-state="day"],[data-state="empty"]) .pano-day > .pano-headline { grid-column:1; grid-row:1; margin:0; font:400 28.5px/30px var(--serif); letter-spacing:0; padding-right:0; color:var(--ink); -webkit-text-stroke:.022em currentColor; text-wrap:nowrap; overflow:hidden; text-overflow:ellipsis; }
 #calendar .ledger-layout .pano-detail:is([data-state="day"],[data-state="empty"]) .pano-day > .pano-eyebrow { grid-column:1 / -1; grid-row:2; margin:0; padding-right:0; font:400 12.5px/18px var(--sans); letter-spacing:0; text-transform:none; color:var(--muted); }
 #calendar .pano-detail:is([data-state="day"],[data-state="empty"],[data-state="locked"]) .pano-eyebrow::before { content:none; }
 #calendar .ledger-layout .pano-eyebrow .pano-dot { margin:0 .2em; font-weight:600; }
 #calendar .ledger-layout .pano-detail:is([data-state="day"],[data-state="empty"]) .pano-day > .pano-count { grid-column:2; grid-row:1; align-self:start; margin:3px 0 0; font:700 13px/18px var(--sans); word-spacing:1px; white-space:nowrap; }
 #calendar .ledger-layout .pano-detail[data-state="empty"] .pano-day > .pano-count { color:var(--muted); }

 /* the cards */
 #calendar .ledger-layout .pcards { gap:9px; }
 #calendar .ledger-layout .pcards > li.session-preview-row { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:0; align-items:start; padding:10.75px 10px 9px 13.5px; border:1px solid var(--day-line); border-radius:var(--r1); background:var(--desk); }
 #calendar .ledger-layout .session-preview-row > .pcard { grid-column:1 / 3; grid-row:1; display:flex; flex-direction:column; gap:0; min-width:0; width:auto; margin:0; padding:0; border:0; background:none; }
 #calendar .ledger-layout .session-preview-row .pcard-time { display:block; color:var(--blue); font:600 14.5px/18px var(--sans); font-variant-numeric:tabular-nums; white-space:nowrap; }
 #calendar .ledger-layout .session-preview-row .pcard-title { margin:3px 0 0; font:400 16px/22px var(--sans); letter-spacing:0; -webkit-line-clamp:1; }
 #calendar .ledger-layout .session-preview-row .pcard-meta { margin:2px 0 0; font:400 11.5px/17px var(--sans); word-spacing:1px; color:var(--muted); }
 #calendar .ledger-layout .session-preview-row .pcard-tags { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; font:400 12px/16px var(--sans); }
 #calendar .ledger-layout .session-preview-row .pcard-tags:has(.tag.stale) { position:static; width:auto; height:auto; margin:3px 0 0; overflow:visible; clip:auto; clip-path:none; white-space:normal; }
 #calendar .ledger-layout .session-preview-row .pcard-tags:has(.tag.stale) .tag:not(.stale) { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }
 #calendar .ledger-layout .session-preview-row .pcard-hits { margin:3px 0 0; font:500 12.5px/17px var(--sans); }

 /* the photos and the row's words */
 #calendar .session-preview-row > .cal-peek { grid-column:1; grid-row:2; align-self:start; justify-self:start; margin:5px 0 0; gap:var(--th-gap); }
 #calendar .session-preview-row > .cal-peek .cal-peek-th { width:var(--th-w); height:var(--th-h); font-size:9px; }
 #calendar .session-preview-row > .cal-peek:not(.hits) .cal-peek-th { outline:1px solid color-mix(in srgb, var(--ink) 9%, transparent); outline-offset:-1px; } /* a hairline over the photo: a white-grounded one keeps its tile */
 #calendar .session-preview-row > .cal-peek .cal-peek-more { display:none; }
 #calendar .session-preview-row > .pcard-go { grid-column:2 / 4; grid-row:2; align-self:start; display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; min-height:34px; margin:5px 0 0; padding:0; color:var(--muted); font:400 12.5px/18px var(--sans); cursor:pointer; -webkit-tap-highlight-color:transparent; }
 #calendar .session-preview-row > .cal-peek ~ .pcard-go { min-height:var(--th-h); }
 #calendar .session-preview-row > .cal-peek:not([hidden]) ~ .pcard-go { padding-left:var(--go-gap); }
 #calendar .session-preview-row > .cal-peek[hidden] ~ .pcard-go { padding-left:calc(var(--th-w) * 3 + var(--th-gap) * 2 + var(--go-gap)); }
 #calendar .session-preview-row > .pcard-go .pcard-lots { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 #calendar .session-preview-row > .pcard-go > svg { flex:none; width:13px; height:13px; margin-right:1.5px; color:var(--ink); }
 #calendar .session-preview-row.is-open > .pcard-go > svg { transform:rotate(90deg); }

 /* the bookmark: a 30px square, its press area 44px */
 #calendar .session-preview-row > .ledger-save { grid-column:3; grid-row:1; align-self:start; width:30px; height:30px; min-height:0; margin:-2.75px 0 0 12px; padding:0; border:1px solid var(--day-line); border-radius:var(--r1); background:var(--desk); color:var(--ink); }
 #calendar .session-preview-row > .ledger-save::after { content:""; position:absolute; inset:-8px; }
 #calendar .session-preview-row > .ledger-save > svg { width:17px; height:17px; }
 #calendar .session-preview-row > .ledger-save[aria-pressed="true"] { color:var(--blue); border-color:var(--blue); background:var(--tint); }

 /* a session opened in the card: the catalogue spans the card's width, under the row */
 #calendar .session-preview-row > .session-catalogue { grid-column:1 / -1; grid-row:3; margin:12px 0 1px; }
}

/* Session cards share Search's inset photo, editorial title and divided figures. */
#calendar .ledger-layout .pcards { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:16px; padding:0; } /* 19 October 2026 (Carl: "the card kind of jumps"): the list is given the panel's height, and stretched rows made every closed card 10px taller than itself, so a card opening shrank them all and lifted the one it opened; each card is its own height now */
#calendar .ledger-columns { display:none; }
#calendar .ledger-layout .pcards > li.session-preview-row.session-result { position:relative; display:grid; grid-template-columns:clamp(140px,27%,250px) minmax(0,1fr) 44px; grid-template-rows:minmax(100px,auto) auto; gap:0 24px; padding:16px; border:1px solid var(--fill); border-radius:var(--r1); background:var(--desk); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 5%,transparent); align-items:start; }
#calendar .ledger-layout .session-result > .session-result-media { position:relative; grid-column:1; grid-row:1 / span 2; display:block; align-self:stretch; width:100%; min-height:190px; overflow:hidden; margin:0; padding:0; border:0; border-radius:var(--r1); background:var(--subtle); color:var(--muted); }
.session-media-hero { position:absolute; inset:0; display:block; }
.session-media-hero img { width:100%; height:100%; object-fit:cover; }
.session-media-strip { position:absolute; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; bottom:8px; left:8px; right:8px; padding:6px; border-radius:5px; background:rgb(0 0 0 / 45%); }
.session-media-strip > span { display:block; aspect-ratio:1.2; overflow:hidden; border:1px solid rgb(255 255 255 / 30%); border-radius:4px; }
.session-media-strip img { display:block; width:100%; height:100%; object-fit:cover; }
.session-media-empty { display:grid; place-items:center; height:100%; min-height:inherit; font:400 12px var(--sans); }
#calendar .ledger-layout .session-result > .session-result-info { grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:12px; width:100%; min-width:0; min-height:0; padding:12px 0 16px; margin:0; border:0; background:none; text-align:left; color:var(--ink); }
/* 19 October 2026 (Carl: "If they click anywhere else ... it should open up the extended view"): the whole card opens its catalogue (calendar.js mount), so it points as a link does; its open catalogue does not */
#calendar .ledger-layout .session-result { cursor:pointer; }
#calendar .ledger-layout .session-result .session-catalogue { cursor:auto; }
#calendar .ledger-layout .session-result .pcard-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0; font:400 clamp(24px,3vw,36px)/1.08 var(--serif); color:var(--ink); }
#calendar .ledger-layout .session-result .pcard-meta { margin:0; font:400 16px/1.35 var(--sans); color:var(--muted); }
#calendar .session-result > .ledger-save { grid-column:3; grid-row:1; width:44px; height:44px; min-height:44px; margin:4px 0 0; padding:0; border:1px solid var(--fill); border-radius:var(--r1); background:var(--desk); }
#calendar .session-result > .ledger-save > svg { width:21px; height:21px; }
#calendar .session-result > .ledger-save[aria-pressed="true"] { color:var(--blue); background:var(--desk); border-color:var(--fill); }
#calendar .session-result-metrics { grid-column:2 / -1; grid-row:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:0; border-top:1px solid var(--fill); padding-top:18px; padding-bottom:4px; align-items:center; }
.session-result-metrics > div { display:flex; flex-direction:column; gap:8px; min-width:0; }
.session-result-metrics > div + div { border-left:1px solid var(--fill); padding-left:24px; }
.session-result-label { font:400 11px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
#calendar .ledger-layout .session-result-metrics .pcard-time, #calendar .session-result-count { font:600 28px/1.2 var(--sans); color:var(--ink); white-space:nowrap; }
#calendar .session-result-go { display:flex; align-items:center; justify-content:flex-end; gap:12px; align-self:stretch; padding:0 0 0 24px; border:0; border-left:1px solid var(--fill); background:none; color:var(--muted); font:400 15px/1.3 var(--sans); }
#calendar .session-result > .session-catalogue { grid-column:1 / -1; grid-row:3; margin-top:16px; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #calendar .ledger-layout .pcards { gap:8px; }
 #calendar .ledger-layout .pcards > li.session-preview-row.session-result { grid-template-columns:82px minmax(0,1fr) 30px; grid-template-rows:minmax(48px,auto) auto; column-gap:10px; padding:8px; }
 #calendar .ledger-layout .session-result > .session-result-media { min-height:96px; border-radius:var(--r1); }
 .session-media-strip { gap:2px; padding:3px; bottom:4px; left:3px; right:3px; }
 .session-media-strip > span { border-radius:2px; aspect-ratio:1; }
 #calendar .ledger-layout .session-result > .session-result-info { padding:2px 0 8px; gap:4px; }
 #calendar .ledger-layout .session-result .pcard-title { font-size:20px; line-height:1.05; -webkit-line-clamp:2; }
 #calendar .ledger-layout .session-result .pcard-meta { font-size:10px; line-height:1.3; }
 #calendar .session-result > .ledger-save { width:30px; height:30px; min-height:30px; margin:0; }
 #calendar .session-result > .ledger-save > svg { width:17px; height:17px; }
 #calendar .session-result-metrics { padding-top:8px; padding-bottom:0; grid-template-columns:minmax(0,1.2fr) minmax(0,.7fr) auto; }
 .session-result-metrics > div { gap:4px; }
 .session-result-metrics > div + div { padding-left:8px; }
 .session-result-label { font-size:7px; letter-spacing:.05em; }
 #calendar .ledger-layout .session-result-metrics .pcard-time, #calendar .session-result-count { font-size:15px; }
 #calendar .session-result-go { font-size:9px; padding-left:8px; gap:2px; }
 #calendar .session-result-go svg { width:10px; }
}
/* 19 October 2026 (Carl: "On the calendar, the sessions should also have the alarm, as in the other cards, where they can alert as to when it's gonna
   start or time before it starts"): a session's bell (alert-panel.js sessionButtonHtml, the lots' red square) sits beside its bookmark at the card's top
   right, outermost, as a lot card's does: the bookmark's column holds both, the bookmark at its left and the bell at its right, the bell the bookmark's
   square (44px, its icon 21px). On a phone it is drawn as a lot's bell is on Search's phone card: the bookmark's 30px square and hairline, the bell in
   ink, red once the session has alerts; 14px apart, so each keeps a 44px press area (the bookmark's ::after above, the bell's here). A sale that has
   started or closed has no bell, and its column is the bookmark's alone. */
#calendar .ledger-layout .pcards > li.session-preview-row.session-result:has(> .ap-btn) { grid-template-columns:clamp(140px,27%,250px) minmax(0,1fr) 96px; }
#calendar .session-result:has(> .ap-btn) > .ledger-save { justify-self:start; }
#calendar .session-result > .ap-btn { grid-column:3; grid-row:1; justify-self:end; width:44px; height:44px; margin:4px 0 0; }
#calendar .session-result > .ap-btn svg { width:21px; height:21px; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #calendar .ledger-layout .pcards > li.session-preview-row.session-result:has(> .ap-btn) { grid-template-columns:82px minmax(0,1fr) 74px; }
 #calendar .session-result > .ap-btn { width:30px; height:30px; margin:0; border:1px solid var(--fill); background:var(--desk); color:var(--ink); }
 #calendar .session-result > .ap-btn.has { color:var(--risk-ink); }
 #calendar .session-result > .ap-btn svg { width:17px; height:17px; }
 #calendar .session-result > .ap-btn::after { inset:-7px; }
}
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #calendar .ledger-layout .pano-grid { grid-template-rows:repeat(var(--pano-rows,5),38px); }
 /* 38px rows: the date and its count (26px of ink) sit in the middle, 6px from top and bottom; the ring and the empty day's block move up with the date */
 #calendar .ledger-layout .pcell { padding-top:1px; }
 #calendar .ledger-layout .pcell.today:not(.selected)::before, #calendar .ledger-layout .pcell.selected:not(.has)::before { top:-5px; }
 /* today: a blue outline in the day shown's box (its size, inset and corners), not a ring; its count sits where every other day's does */
 #calendar .ledger-layout .pcell.today:not(.selected)::before { top:0; bottom:0; left:2.75px; right:2.75px; width:auto; height:auto; border-radius:var(--r1); }
 #calendar .ledger-layout .pcell.today:not(.selected):not(.has)::before { top:-5px; bottom:auto; height:32px; }
 #calendar .ledger-layout .pcell.today:not(.selected) .pcount { margin-top:1.75px; }
 #calendar .pcell.today:not(.selected) .sk-calendar-cell { margin-top:0; }
 #calendar .cal-month-fold { margin-top:8px; }
}

/* 18 October 2026 (Carl: "use the same card from Search on mobile for Sessions as well, but obviously swap out context"): a phone's saved
   session is Search's compact card (wl-sessions.js phoneCardHtml, in .wl-sess-m, which every Search card rule above names beside .chat).
   What differs: the list has no frame of its own (each card is framed, as Search's are), the third figure is the date in ink, and an open
   card's catalogue preview runs the card's full width under it. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  .wl-sess-m .wl-session-list { border:0; border-radius:0; overflow:visible; }
  .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row .wl-sess-date time { color:var(--wlc-ink,var(--ink)); font-weight:500; }
  .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row .sr-title-phone { padding-right:40px; }
  #watchlist .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row.open .c-wl-sales { grid-column:1/-1; grid-row:3; margin:0; padding:0; border:0; border-top:1px solid var(--wlc-hair,var(--fill)); border-radius:0; background:none; }
  #watchlist .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row.open .c-wl-sales .session-catalogue { margin:0; padding:12px 0 2px; border:0; border-radius:0; background:none; } /* the preview's own frame: the card frames it here */
  /* 19 October 2026 (Carl: "In mobile view of the session on watch list, you can remove the collapse button and bring up ... the buttons for the
     scroller so that they line up with the left side saying catalogue preview"): no Collapse (the card itself closes it), and the pager's count and
     arrows share the "Catalogue preview" line, at its right end; everything else in the preview spans the card under that line */
  #watchlist .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row.open .c-wl-sales .session-catalogue { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:12px; }
  #watchlist .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row.open .c-wl-sales .session-catalogue > * { grid-column:1 / -1; }
  #watchlist .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row.open .c-wl-sales .session-catalogue > .session-catalogue-top { grid-column:1; grid-row:1; }
  #watchlist .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row.open .c-wl-sales .session-catalogue > .session-pager { grid-column:2; grid-row:1; justify-content:flex-end; }
  #watchlist .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row.open .c-wl-sales .session-catalogue .session-page-at { margin-right:4px; }
  #watchlist .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row.open .c-wl-sales .session-preview-close { display:none; }
  #watchlist .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row .c-wl-actions > .sr-source { display:none; } /* app.css shows a session card's links (#watchlist .wl-session-card a.c-btn); Search's card has none up here, and the open preview's foot links the sale */
  .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row :is(.wlg-nav,.wlg-strip) { display:none; } /* a catalogue has many photos; the card shows the first, as Search's does (the preview shows the rest) */
}

/* 18 October 2026 (Carl, a picture of the Calendar's phone session card: "All cards on mobile, the search, calender, and watchlist lots and
   sessions should be this size as the calendar is right now"): a closed card in Search, the Watchlist's Lots and its Sessions is the Calendar
   day card's size, 114px: an 82 x 96 photo cropped to fit (object-fit: cover), beside a 48px text block (the name on one line, the house on
   one, each cut with an ellipsis) and a 48px row of three figures, each on one line. Nothing a card says can make it taller or shorter.
   Search's and Sessions' open cards keep this top; an open lot in the Watchlist is its full card. Replaces the 170px block of the same day. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) { display:grid; grid-template-columns:82px minmax(0,1fr); grid-template-rows:48px 48px; column-gap:10px; row-gap:0; padding:8px; overflow:hidden; --wl-stage-h:96px; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-gal { grid-column:1; grid-row:1/span 2; position:relative; width:82px; height:96px; min-height:0; align-self:start; border-radius:var(--r1); overflow:hidden; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .wlg { position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) :is(.wlg-img,.wlg-stage img) { width:100%; height:100%; object-fit:cover; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) :is(.c-wl-when,.wlg-count,.wlg-nav,.wlg-strip) { display:none; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-main { display:contents; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-text { grid-column:2; grid-row:1; box-sizing:border-box; height:48px; min-width:0; padding:2px 0 0; margin:0; overflow:hidden; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .sr-title-phone { display:block; height:21px; min-height:0; max-height:none; margin:0; padding:0 82px 0 0; font-size:20px; line-height:21px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-meta { display:block; height:16px; margin:4px 0 0; padding:0 82px 0 0; font-size:11px; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-meta > span { display:inline; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-meta-details::before { content:" · "; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-actions { grid-column:2; grid-row:1; align-self:start; justify-self:end; display:flex; flex-direction:row; gap:8px; width:auto; margin:0; padding:0; border:0; z-index:1; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-actions > :is(.sr-watch,.ap-btn) { width:36px; height:36px; min-height:36px; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-actions > :is(.sr-source,.c-wl-more) { display:none; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-figures { grid-column:2; grid-row:2; align-self:end; box-sizing:border-box; height:40px; margin:0; padding-top:0; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.85fr); grid-template-rows:auto auto; column-gap:8px; overflow:visible; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) :is(.sr-metric-details,.sr-bid-n,.c-fig-n,.sr-gap,.src,.bid-kind,.c-wl-at,.sr-countdown-clock,.sr-brief,.sr-sub,.sr-secondary,.sr-pills,.watched-pill) { display:none; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-value > :is(b,.c-fig-k,.c-fig-n,.sr-wait,.sr-median) { display:none; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) :is(.c-wl-bid > .c-fig-k,.c-wl-left > .c-fig-k,.c-marg-label) { display:block; font-size:9px; line-height:12px; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) :is(.sr-bid,.c-wl-in,.sr-margin-empty > :not(.c-marg-label)) { font-size:15px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-left { display:flex; flex-direction:column; flex-wrap:nowrap; grid-column:2; grid-row:1/span 2; min-width:0; margin:0; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) :is(.c-wl-margin,.sr-margin-empty) { flex-wrap:nowrap; grid-column:3; grid-row:1/span 2; min-width:0; }
}
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat, .wl-sess-m) .sr-table.c-wl-table[data-view] > .c-wl-row :is(.c-wl-left,.sr-margin-empty), .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:where(:not(.open)) :is(.c-wl-left,.sr-margin-empty) { flex-wrap:nowrap; min-width:0; } /* 18 October 2026 (Carl, a screenshot: "this broke the time"): a fraction of a pixel short of its 44px row, the Closes in column wrapped its time beside its label and over the Date, as the Margin's did */
}

/* 19 October 2026 (Carl: "The watchlist should have the exact same cards as search results"): a closed saved lot is drawn by every Search
   card rule (the .wl-lots selectors beside them, .c-wl-row:where(:not(.open)) so they weigh what Search's do); the Watchlist's own closed-card
   rules are gone. Only the Watchlist has Remove's "Confirm remove" (confirm.js), drawn here as Sessions' is: red, in place of the bookmark and bell. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
}

/* 19 October 2026 (Carl, with item.png: "Margin on top of the current bid closes in and margin text is not equal. Ensure it's consistent"):
   the three figures are one grid, the same in every cell: the label on a 10px line, then the figure on a 22px line (one size for the three, --fig: 16px,
   smaller on a narrow phone so "10h 59m" fits its column; the Margin pill 22px high), so the labels share a top and the figures a middle.
   Then (Carl: "the spacing ... from the top of the text current bid closes in and margin to the dividing line above them ... match this exactly"):
   item.png measured and scaled to the 96px photo: the line 48.6px below the photo's top, the labels' ink 11.7px under it, the figures' foot 12px
   above the photo's; so the figures fill their 48px row with 9px above the labels. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-figures { height:48px; align-self:stretch; box-sizing:border-box; padding-top:9px; grid-template-rows:10px 22px; row-gap:0; --fig:min(16px, (100vw - 158px) / 12.5 - 3.3px); }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-bid > .c-fig-k { grid-row:1; align-self:start; margin:0; line-height:10px; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-figures .c-wl-bid > .sr-bid { grid-row:2; align-self:center; margin:0 8px 0 0; font-size:var(--fig); line-height:22px; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) :is(.c-wl-left,.c-wl-margin,.sr-margin-empty) { display:grid; grid-template-rows:10px 22px; row-gap:0; align-content:start; grid-row:1/span 2; gap:0; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) :is(.c-wl-left,.c-wl-margin,.sr-margin-empty) > :is(.c-fig-k,.c-marg-label) { grid-row:1; margin:0; line-height:10px; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-left > .c-wl-left-m { grid-row:2; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; height:22px; margin:0; } /* row: in a column, centring it put a short time ("2d 2h") right of its label */
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-figures :is(.c-wl-left .c-wl-in,.sr-margin-empty > :not(.c-marg-label)) { font-size:var(--fig) !important; line-height:22px !important; font-weight:500; } /* !important: the fit-to-column size above is one (100cqi / 4.1); a figure too long for its column ends in an ellipsis instead */
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-margin > :not(.c-marg-label) { grid-row:2; align-self:center; justify-self:start; margin:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* a word in place of a figure ("set a value") stays on the figures' line */
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .marg-pill { display:inline-flex; align-items:center; box-sizing:border-box; height:22px; line-height:22px; padding-block:0 !important; font-size:calc(var(--fig) * .83) !important; }
}

/* 19 October 2026 (Carl: "a bit more margin between the current bid, the price, the closes in, the date, margin, and the actual margin. Check
   pixel to pixel ... copy the mock-up"): item.png measured, at the 96px photo's scale: 11.7px from the line to the labels' ink, 8.2 from
   the labels to the figures, 12.2 from the figures to the photo's foot; its labels small and spaced out. Here: the labels 8px with .1em
   tracking, 9px above them and 1px between them and the figures: 11.75 / 8.25 / 11.25 measured. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) .c-wl-figures { padding-top:9px; row-gap:1px; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) :is(.c-wl-left,.c-wl-margin,.sr-margin-empty) { row-gap:1px; }
  :is(.chat .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-sess-m .sr-table.c-wl-table[data-view] > .c-wl-row, .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open)) :is(.c-wl-bid > .c-fig-k,.c-wl-left > .c-fig-k,.c-marg-label) { font-size:8px; letter-spacing:.1em; }
}

/* 19 October 2026 (Carl: "The full catalogue and bidding are on the auction's own site. remove that text on mobile"): a session's catalogue foot
   (cal-featured.js, Calendar and Watchlist) keeps only its link on a phone. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  .session-catalogue-foot > span:first-child { display:none; }
}

/* 19 October 2026 (Carl: "This text is redundant: Index refreshed 4 d ago / Times in your local time zone (Bangkok, GMT+7)"): no Calendar foot on a
   phone (the day's heading already says Local time). The desktop keeps it. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  #calendar.pano-mode #cal-foot { display:none; }
}

/* 19 October 2026 (Carl: "Re-implement ... set your ceiling, your ceiling, set your value, your value more naturally into the actual card ...
   This entire section is too long, too bulky"): an open saved lot's Your ceiling and Your value are a second ledger row in the figures' own
   look (watchlist.js phoneToolsHtml), each a press to edit; the List and "Wrong label?" share one line under them. The two disclosures that
   were above the bookmark row are gone. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .wl-lots .sr-table.c-wl-table[data-view] .c-wl-row > .wl-m-tools { display: block; margin-top: 0; padding: 8px 0 6px; }
  .wl-lots .sr-table .wl-m-mine { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .wl-lots .sr-table .wl-m-mine.editing { display: block; }
  .wl-lots .sr-table .wl-m-mine.editing > .c-fig-k { display: block; margin-bottom: 6px; }
  .wl-lots .sr-table .wl-m-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--wlc-ink, var(--ink)); font: inherit; text-align: left; cursor: pointer; }
  .wl-lots .sr-table .wl-m-cell > b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 18px/22.5px var(--sans); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
  .wl-lots .sr-table .wl-m-cell.over > b { color: var(--risk-ink); }
  .wl-lots .sr-table .wl-m-set { font: 500 15px/22.5px var(--sans); color: var(--blue); }
  .wl-lots .sr-table .wl-m-cell:hover .wl-m-set { text-decoration: underline; text-underline-offset: 3px; }
  .wl-lots .sr-table .wl-m-mine.editing > .c-wl-ceiling { display: block; }
  .wl-lots .sr-table .wl-m-mine.editing .c-ceil-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .wl-lots .sr-table .wl-m-mine.editing .c-ceil-edit input { flex: 1 1 120px; min-width: 0; }
  .wl-lots .sr-table .wl-m-mine.editing > .c-wl-value.wl-m-value { display: block; padding: 0; border: 0; background: none; }
  .wl-lots .sr-table .wl-m-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
  .wl-lots .sr-table .wl-m-foot .wl-pick-in { display: inline-flex; align-items: center; gap: 8px; }
  .wl-lots .sr-table .wl-m-foot .wl-pick-k { font: 500 9.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wlc-muted, var(--muted)); }
  .wl-lots .sr-table .wl-m-foot .wl-pick select { min-height: 36px; font: 500 13px/1.3 var(--sans); }
  .wl-lots .sr-table .wl-m-foot > .lr-open { margin-left: auto; min-height: 36px; }
}

/* 19 October 2026 (Carl: "Remove the 'Collapse' button text and icon in the mobile calendar and push up the Lots 1–3 of 24 ‹ › text to that area"):
   the phone Watchlist's session preview layout (above, .wl-sess-m) on the Calendar's: no Collapse (the session card itself closes it), and the
   pager's count and arrows at the right end of the "Catalogue preview" line; everything else spans the width under it */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  #calendar .session-catalogue { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:12px; }
  #calendar .session-catalogue > * { grid-column:1 / -1; }
  #calendar .session-catalogue > .session-catalogue-top { grid-column:1; grid-row:1; }
  #calendar .session-catalogue > .session-pager { grid-column:2; grid-row:1; justify-content:flex-end; margin:0 0 10px; }
  #calendar .session-catalogue .session-page-at { margin-right:4px; }
  #calendar .session-preview-close { display:none; }
}

/* 19 October 2026 (Carl: "New Search should have different color box"): the phone's New search is set apart from Tag a lot and Add a photo
   beside it: the blue wash and blue ink of the bar's chosen tab (.mobile-nav), with a blue edge; tokens, so dark mode follows */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  .mobile-new-search { border-color: color-mix(in srgb, var(--blue) 35%, transparent); background: var(--tint); color: var(--blue); }
  .mobile-new-search:active { background: color-mix(in srgb, var(--blue) 16%, var(--desk)); }
}

/* 19 October 2026 (Carl: "Implement the same color scheme used in dark mode cards for calender and watchlist tabs on mobile", then, asked
   which: light mode copies dark): dark mode's Calendar and Watchlist are cards one step lighter than the page, on a hairline, with no shadow
   (theme-dark.css, the graphite theme). In light mode on a phone those two tabs take the same order: the page is --paper (the bar too),
   the sections that painted white over it are clear, and the cards are white on --fill with no shadow. Search kept its white page until
   (Carl, the same evening: "let's use the off white background for all three including search"): Search's page is --paper too (.chat, its
   root); the band behind the bar is clear, and the bar, the starters and the result cards stay white on it. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
  html:not([data-theme="dark"]) .frame:has(#calendar.pane, #watchlist.pane, .chat),
  html:not([data-theme="dark"]) .frame:has(#calendar.pane, #watchlist.pane, .chat) .mobile-nav { background: var(--paper); }
  html:not([data-theme="dark"]) #calendar :is(.cal-head, .cal-filters, .pano-cal, .pano-grid, .pano-detail),
  html:not([data-theme="dark"]) #watchlist :is(.wl-week, .wl-week-mobile),
  html:not([data-theme="dark"]) .chat .composer-wrap { background: transparent; }
  html:not([data-theme="dark"]) #view .c-wl-table[data-view] > .c-wl-row,
  html:not([data-theme="dark"]) #calendar .ledger-layout .pcards > li.session-result { background: #fff; border-color: var(--fill); box-shadow: none; }
  /* 19 October 2026 (Carl: "the days of the month which are actually days should be the white and those that are not part of that month should
     be off white"): the month's own days are white cells; the blanks before the 1st and after the last day stay the page's --paper. The day
     shown is white round its blue too: its blue is a ::before at z-index -1, so the cell isolates and the blue stays above its own white.
     !important: the phone block's `.pcell { background:transparent !important }` */
  html:not([data-theme="dark"]) #calendar .ledger-layout .pano-grid > .pcell:not(.blank) { background: #fff !important; }
  html:not([data-theme="dark"]) #calendar .ledger-layout .pano-grid > .pcell.selected { isolation: isolate; }
}

/* 19 October 2026 (Carl: "Add tiny grid to the calender on mobile calender"): hairlines between the month's days on a phone */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  #calendar .ledger-layout .pano-grid { border-top: 1px solid var(--fill); border-left: 1px solid var(--fill); }
  #calendar .ledger-layout .pano-grid > .pcell { box-sizing: border-box; border-right: 1px solid var(--fill); border-bottom: 1px solid var(--fill); border-radius: 0; }
  /* Carl, the same day: the day shown fills its whole box, square, not a rounded box inside it */
  #calendar .ledger-layout .pano-grid > .pcell.selected::before, #calendar .ledger-layout .pano-grid > .pcell.selected:not(.has)::before { inset: 0; width: auto; height: auto; border-radius: 0; }
}

/* Approved light palette: neutral surfaces, blue actions and semantic status colors. */
html:not([data-theme="dark"]) {
 --desk:#f5f6f8; --paper:#f5f6f8; --subtle:#eef1f5; --fill:#d8dee7; --chev:#a0a9b6;
 --ink:#1f2937; --body:#465164; --muted:#5c6675; --head:#5c6675; --faint:#5c6675;
 --blue:#315dcc; --blue-hover:#244aa8; --tint:#e8edf7;
 --red:#a12f3a; --risk-ink:#a12f3a; --good-ink:#236442; --nudge-ink:#8a5a12;
 --row-alt:#f7f9fc; --row-alt-hover:#eef2f8;
 --wlc-card:#fff; --wlc-soft:#f5f6f8; --wlc-bid:#fff; --wlc-hair:#d8dee7; --wlc-edge:#b4bdca;
 --wlc-ink:#1f2937; --wlc-body:#465164; --wlc-muted:#5c6675; --wlc-btn:#fff; --wlc-fill:#eef1f5;
 --wlc-when-bg:#eef1f5; --wlc-when-ink:#5c6675;
}
html:not([data-theme="dark"]) :is(.hdr,.mobile-nav) { background:#fff; border-color:#d8dee7; }
html:not([data-theme="dark"]) :is(.msg-user,.ava,.profile .avatar) { background:#e8edf7; color:#26354f; }
html:not([data-theme="dark"]) #view .c-wl-table[data-view] > .c-wl-row,
html:not([data-theme="dark"]) #calendar .ledger-layout .pcards > li.session-result {
 --desk:#fff; background:#fff; border-color:#d8dee7; box-shadow:none;
}
html:not([data-theme="dark"]) #view .c-wl-table[data-view] > .c-wl-row .c-wl-actions > :is(.sr-watch,.ap-btn),
html:not([data-theme="dark"]) #calendar .session-result > .ledger-save {
 background:#fff; border-color:#d8dee7;
}
html:not([data-theme="dark"]) #view .c-wl-table[data-view] > .c-wl-row .c-wl-actions > .ap-btn {
 position:relative; color:#5c6675;
}
html:not([data-theme="dark"]) #view .ap-btn.has svg path:first-child { fill:none; }
html:not([data-theme="dark"]) #view .ap-btn.has::before {
 content:""; position:absolute; top:4px; right:4px; width:5px; height:5px; border-radius:50%; background:#315dcc;
}
html:not([data-theme="dark"]) #view :is(.c-wl-when.soon,.c-wl-when.near,.c-wl-left.soon,.c-wl-left.near) {
 --risk-ink:#8a5a12; color:#8a5a12;
}
html:not([data-theme="dark"]) #view :is(.c-wl-left.soon,.c-wl-left.near) :is(b,.c-wl-in) { color:#8a5a12; }
html:not([data-theme="dark"]) #view .composer { background:#fff; border-color:#d8dee7; box-shadow:0 2px 8px rgb(31 41 55 / 4%); }
html:not([data-theme="dark"]) #view .composer:is(:hover,:focus-within) { border-color:#315dcc; }
html:not([data-theme="dark"]) .ui-sel-panel { --ui-sel-bg:#fff; --ui-sel-rule:#d8dee7; }

html:not([data-theme="dark"]) .frame:has(#calendar.pane, #watchlist.pane, .chat) .mobile-nav { background:#fff; }

/* Light calendar: one white date chooser above a neutral session-results section. */
html:not([data-theme="dark"]) #calendar {
 --desk:#fff; --cal-solid:#315dcc; --ramp-ink:#315dcc; --ramp-line:#315dcc;
 --cal-hair:#e3e7ed; background:#fff;
}
html:not([data-theme="dark"]) #calendar :is(.cal-head,.cal-filters,.pano-cal,.pano-grid,.pano-dow,.cal-month-fold) { background:#fff; }
html:not([data-theme="dark"]) #calendar .ledger-layout .pano-grid > .pcell {
 background:#fff !important; border-color:#e3e7ed;
}
html:not([data-theme="dark"]) #calendar .ledger-layout .pano-grid > .pcell.selected {
 background:#315dcc !important; color:#fff;
}
html:not([data-theme="dark"]) #calendar .ledger-layout .pano-grid > .pcell.selected::before { background:#315dcc; }
html:not([data-theme="dark"]) #calendar .cal-nav .cal-btn {
 background:#fff; border-color:#d8dee7; color:#5c6675;
}
html:not([data-theme="dark"]) #calendar .cal-nav .cal-btn.wide { color:#315dcc; }
html:not([data-theme="dark"]) #calendar .cal-modes { background:#f5f6f8; border-color:#e3e7ed; }
html:not([data-theme="dark"]) #calendar .cal-modes .cal-btn.on,
html:not([data-theme="dark"]) #calendar .cal-modes .cal-btn.on:hover { background:#e8edf7; color:#315dcc; }
html:not([data-theme="dark"]) #calendar :is(.cal-ftoggle,.cf input[type="search"]) { background-color:#fff; border-color:#d8dee7; }
html:not([data-theme="dark"]) #calendar .ledger-layout .pano-detail { background:#f5f6f8; }
html:not([data-theme="dark"]) #calendar .ledger-layout .pano-detail:is([data-state="day"],[data-state="empty"]) .pano-day > .pano-count { color:#1f2937; }
html:not([data-theme="dark"]) #calendar .session-result-go { color:#315dcc; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 html:not([data-theme="dark"]) #calendar .ledger-layout .pano-detail { margin-inline:-16px; padding-inline:16px; }
}
html:not([data-theme="dark"]) #calendar .cal-nav .cal-btn.wide:not(:disabled),
html:not([data-theme="dark"]) #calendar .cal-nav .cal-btn.wide:not(:disabled):hover { background:#fff; color:#315dcc; }
html:not([data-theme="dark"]) #calendar .cal-filters .cf.grow input[type="search"] { background-color:#fff; }

/* Light Watchlist follows Calendar: a white chooser over neutral saved results. */
html:not([data-theme="dark"]) #watchlist { background:#fff; }
html:not([data-theme="dark"]) #watchlist :is(.wl-content-tabs,.wl-week,.wl-week-mobile,.wl-week-tools,.wl-wm-head,.wl-wm-subnav,.wl-wm-strip,.wl-wm-footer) {
 background:#fff; border-color:#e3e7ed;
}
html:not([data-theme="dark"]) #watchlist :is(#wl-lots-panel,#wl-sessions-panel) { background:#f5f6f8; }
html:not([data-theme="dark"]) #watchlist :is(.wl-content-tabs button,.wl-wm-dow) { color:#5c6675; }
html:not([data-theme="dark"]) #watchlist .wl-content-tabs button[aria-selected="true"] { color:#315dcc; border-bottom-color:#315dcc; }
html:not([data-theme="dark"]) #watchlist .wl-tab-count { color:#5c6675; background:#eef1f5; }
html:not([data-theme="dark"]) #watchlist .wl-wm-day[aria-pressed="true"] b { background:#315dcc; color:#fff; }
html:not([data-theme="dark"]) #watchlist .wl-wm-day.today:not([aria-pressed="true"]) b { color:#315dcc; box-shadow:inset 0 0 0 1px #315dcc; }
html:not([data-theme="dark"]) #watchlist .wl-wm-dots i { background:#315dcc; }
html:not([data-theme="dark"]) #watchlist :is(.wl-week-day,.wl-wm-agenda) { background:#fff; }
html:not([data-theme="dark"]) #watchlist :is(.wl-week-day.selected,.wl-week-event[aria-pressed="true"]) { background:#e8edf7; }
html:not([data-theme="dark"]) #watchlist :is(.wl-lot-tools,.wl-session-tools) :is(input,select),
html:not([data-theme="dark"]) #watchlist .wl-control-toggle { background:#fff; border-color:#d8dee7; }
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 html:not([data-theme="dark"]) #watchlist :is(#wl-lots-panel,#wl-sessions-panel) { margin-inline:-16px; padding-inline:16px; }
}
html:not([data-theme="dark"]) #watchlist { background:#f5f6f8; }
html:not([data-theme="dark"]) #watchlist > .wl-content-tabs,
html:not([data-theme="dark"]) #watchlist > #c-wl-week { background:#fff; box-shadow:none; }

/* Approved Watchlist toolbar: inset from the section edge, with centered controls. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist :is(#wl-lots-panel,#wl-sessions-panel) { padding-top:16px; }
 #watchlist :is(#wl-lots-panel,#wl-sessions-panel) > .view-head {
  align-items:center; gap:8px; margin:0 0 12px; padding-top:0;
 }
 #watchlist :is(#wl-lots-panel,#wl-sessions-panel) > .view-head > h2 {
  margin-top:0; margin-bottom:0; line-height:1.1;
 }
 #watchlist .view-head > .wl-control-toggle { width:44px; height:44px; min-width:44px; min-height:44px; }
 #watchlist .view-head > [data-act="wl-reload"] { height:44px; min-height:44px; margin:0; }
 #watchlist :is(.wl-lot-tools,.wl-session-tools) { margin-bottom:12px; }
 #watchlist .view-head > :is(.wl-control-toggle,[data-act="wl-reload"]):focus:not(:focus-visible) { outline:none; box-shadow:none; }
}
/* Keep white chooser surfaces from painting over the results section's top inset. */
html:not([data-theme="dark"]) #watchlist > .wl-content-tabs,
html:not([data-theme="dark"]) #watchlist > #c-wl-week { box-shadow:none; }

/* 19 October 2026 (Carl, with a picture of Sun 25's grey box running into the week card's edge: "margins here a bit off not rounded like
   others"): a day's pointer-over box keeps 3px clear of its neighbours and of the card's sides, and only a mouse shows it (a finger's tap
   no longer leaves it behind) */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  #watchlist .wl-wm-strip { padding-inline: 3px; }
  #watchlist .wl-wm-day { margin-inline: 3px; }
  #watchlist .wl-week-mobile .wl-wm-day:hover { background: transparent; }
}
@media ((max-width: 699px) or ((max-height: 500px) and (pointer: coarse))) and (hover: hover) {
  #watchlist .wl-week-mobile .wl-wm-day:hover { background: var(--subtle); }
}

/* Inset the Watchlist date buttons so edge states never touch the week frame. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-wm-strip { padding:8px; column-gap:4px; }
 #watchlist .wl-wm-day { width:100%; min-width:0; margin-inline:0; }
 #watchlist .wl-wm-day b { min-width:0; width:min(32px,100%); }
}

/* A selected Watchlist date is one blue numeral tile, not two nested selections. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-week-mobile .wl-wm-day[aria-pressed="true"] { background:transparent; }
 #watchlist .wl-week-mobile .wl-wm-day:focus { outline:none; box-shadow:none; }
 #watchlist .wl-week-mobile .wl-wm-day:focus-visible b { outline:2px solid var(--blue); outline-offset:3px; }
}

/* Selected day: an anchored underline, with event dots retaining their own meaning. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 html #watchlist .wl-week-mobile .wl-wm-day[aria-pressed="true"] b {
   position:relative; background:transparent; color:var(--ink); font-weight:600; box-shadow:none;
 }
 html #watchlist .wl-week-mobile .wl-wm-day[aria-pressed="true"] b::after {
   content:""; position:absolute; width:18px; height:2px; left:50%; bottom:1px;
   transform:translateX(-50%); border-radius:var(--r1); background:var(--blue);
 }
 html #watchlist .wl-week-mobile .wl-wm-day[aria-pressed="true"] .wl-wm-dow {
   color:var(--blue); font-weight:600;
 }
 #watchlist .wl-week-mobile .wl-wm-day[aria-pressed="true"]:hover { background:transparent; }
}

/* Day agenda: equal outer gutters and inset content inside highlighted rows. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-week-mobile .wl-wm-agenda { min-width:0; padding-inline:16px; box-sizing:border-box; }
 #watchlist .wl-week-mobile .wl-wm-agenda > [aria-live] { min-width:0; }
 #watchlist .wl-week-mobile .wl-wm-event { box-sizing:border-box; min-width:0; padding-inline:12px; }
}

/* ── R173 (21 October 2026): Henry's phone asks of 21 October. BEGIN ──
   The phone Calendar's look is the model (Henry: "The mobile calendar is perfect and is a great example of what our design should
   look like"): its 36px Month and Agenda track, its eyebrow labels over large figures, its hairlines, its centred Hide month row. */
.m-home, .wlx-full-open { display: none; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  /* Home: the header's mark is a button (app.js renderShell) where the title's ::before drew it; the same tile, the same place */
  html.phone-view .crumb::before { content: none; }
  .m-home { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -7px; padding: 0; border: 0; border-radius: var(--r1); background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-home::before { content: ""; width: 30px; height: 30px; background: url("/assets/brand/auctioneer-icon-ink.svg") center / contain no-repeat; }
  .m-home:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
  .m-home:active::before { opacity: .7; }
  .main:has(#calendar) .m-home { margin-left: -6.5px; margin-right: -1.5px; }
  .main:has(#calendar) .m-home::before { width: 31px; height: 31px; border-radius: var(--r1); }
  html:not([data-theme="dark"]) .m-home::before { filter: grayscale(1) contrast(20) invert(1); }
  html[data-theme="dark"] .m-home::before { filter: grayscale(1) contrast(20); }

  /* Search or Assistant: the switch at the composer's top again (Henry: "Theres no assistnt switch"), on the Calendar's track;
     the usage chip and the model stay off the phone, as before */
  .composer-top { display: flex; margin: 0 0 8px; gap: 0; }
  .composer-top > :not(.mode-switch) { display: none; }
  .mode-switch { height: 36px; padding: 0; border: 0; border-radius: var(--r1); background: color-mix(in srgb, var(--ink) 5%, var(--desk)); box-shadow: inset 0 0 0 1px rgba(32,30,29,.12); }
  .mode-opt, .mode-opt:hover { position: relative; min-width: 88px; height: 36px; padding: 2px 16px 0; border-radius: var(--r1); font: 400 12.5px/1 var(--sans); color: var(--body); }
  .mode-opt[aria-pressed="true"], .mode-opt[aria-pressed="true"]:hover { background: var(--blue-solid, var(--blue)); color: #fff; }
  .mode-opt::after { content: ""; position: absolute; inset: -4px 0; }
  html:not([data-theme="dark"]) .mode-switch { background: #f5f6f8; }
  html:not([data-theme="dark"]) .mode-opt[aria-pressed="true"], html:not([data-theme="dark"]) .mode-opt[aria-pressed="true"]:hover { background: #e8edf7; color: #315dcc; }

  /* Photos and tagged lots: a row of their own above the bar, never in it (photo-drop.js, lot-code.js) */
  .composer-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
  .composer-attach:has(> :not([hidden])) { margin: 0 0 8px; }
  .composer-attach .lc-tags:not([hidden]) { display: flex; flex-wrap: wrap; max-width: 100%; overflow: visible; }
  .composer-attach .lc-pop { height: 36px; padding-left: 10px; }
  .composer .composer-attach .lc-input { width: 11ch; height: 34px; font-size: 16px !important; }
  .composer .composer-attach .lc-input::placeholder { color: var(--muted); opacity: 1; letter-spacing: .06em; }
  .pd-tray { flex: 1 0 100%; display: flex; gap: 8px; max-width: none; height: auto; min-width: 0; padding: 4px 4px 2px 0; border: 0; background: none; overflow-x: auto; scrollbar-width: none; } /* a row of its own, under any tags, scrolling sideways when it is full */
  .pd-tray[hidden] { display: none; }
  .pd-item { position: relative; flex: none; }
  .pd-item .pd-thumb { display: block; width: 56px; height: 56px; border: 1px solid rgba(32,30,29,.16); border-radius: var(--r1); }
  .pd-item .pd-remove { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border: 1px solid rgba(32,30,29,.16); border-radius: 50%; background: var(--desk); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
  .pd-item .pd-remove svg { width: 10px; height: 10px; }
  .msg-photos { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 6px; width: min(100%, 260px); }
  .msg-photos[data-n="3"] { --n: 3; }
  .msg-photos .msg-photo { width: 100%; }

  /* The open Watchlist card at a size to read and press (Henry: "make that encyclopedia and price comp view bigger"): one column,
     Your ceiling and Your value side by side under the Calendar's eyebrows, the tabs and their panel full width with the arrow to the
     whole screen at their top right, then Ask the Assistant and Search similar lots filling their row, and Collapse details under
     them as the Calendar's Hide month. Every field 16px, so a phone never zooms into it. */
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-body { --wxu: .62px; display: flex; flex-direction: column; margin: 0; padding: 0; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-self: stretch; padding: 0; border: 0; border-bottom: 1px solid var(--wlx-hair); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-row[data-setting="ceiling"],
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-row[data-setting="value"] { height: auto; min-height: 72px; max-height: none; padding: 12px 0; border: 0; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-row[data-setting="value"] { padding-left: 16px; border-left: 1px solid var(--wlx-hair); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-row[data-setting] .wlx-cell { height: auto; min-height: 48px; padding: 0; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded :is(.wlx-k, .wl-pick-k) { font: 500 10.5px/1.2 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--wlx-key); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-row[data-setting] .wlx-cell > :is(b, .wlx-add) { display: block; height: auto; margin-top: 8px; padding: 0; border: 0; font: 500 16px/1.25 var(--sans); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-row[data-setting] .wlx-cell > b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wlx-ink); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-row[data-setting] .wlx-cell:hover > :is(b, .wlx-add) { background: none; text-decoration: underline; text-underline-offset: 3px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-row.wlx-list { grid-column: 1 / -1; height: auto; padding: 12px 0; border-top: 1px solid var(--wlx-hair); border-bottom: 0; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-list .wl-pick { padding-top: 0; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-list select { height: 44px; margin-top: 8px; padding: 0 36px 0 12px; background-position: right 14px center; background-size: 12px auto; font: 400 16px/1.2 var(--sans) !important; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-source { grid-column: 1 / -1; position: static; gap: 8px; height: auto; min-height: 44px; margin: 0; padding: 0; border-top: 1px solid var(--wlx-hair); width: auto; font: 400 13.5px/1.3 var(--sans); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-source svg { width: 14px; height: 14px; }
  /* the ceiling and value editors: a 44px field, its currency, Save and Cancel under it */
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-row.wlx-edit { min-height: 0; max-height: none; padding: 12px 0; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-edit .wlx-inline-editor { gap: 8px; margin-top: 8px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-amount { height: 44px; border-radius: var(--r1); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-currency { padding-left: 10px; font: 500 12px/1 var(--sans); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-edit .wlx-amount input { height: 42px; min-height: 42px; padding: 0 8px; font: 400 16px/1.2 var(--sans) !important; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-editor-actions { gap: 6px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-edit .wlx-editor-actions .c-btn { height: 36px; min-height: 36px; padding: 0 6px; border-radius: var(--r1); font: 500 13px/1 var(--sans) !important; }
  /* the tabs and their panel */
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main { position: relative; padding: 0; margin-top: 4px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-tabs { height: 48px; gap: 18px; padding-right: 48px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-tabs button { align-items: center; padding: 2px 2px 0; border-bottom-width: 2px; font: 400 13.5px/1.2 var(--sans); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-tabs button[aria-pressed="true"] { font-weight: 600; font-size: 13.5px; }
  #watchlist .wl-mobile-details .wlx-full-open { position: absolute; top: 2px; right: -6px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r1); background: none; color: var(--wlx-sub); cursor: pointer; }
  #watchlist .wl-mobile-details .wlx-full-open:hover { color: var(--wlx-ink); background: color-mix(in srgb, var(--wlx-ink) 5%, transparent); }
  #watchlist .wl-mobile-details .wlx-full-open:focus-visible { outline: 2px solid var(--wlx-focus); outline-offset: -4px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-panel { height: auto; min-height: 0; max-height: none; overflow: visible; margin-top: 14px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-colhead { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; padding: 0; border: 0; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-colhead .c-ls-strip { position: static; flex: 1 1 100%; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip-path: none; white-space: normal; gap: 4px 12px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-coltitle { font: 600 14px/1.3 var(--sans); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-colnote { font-size: 11.5px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-key { gap: 5px; font-size: 11.5px; line-height: 1.35; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-keyfig { font-size: 12.5px; line-height: 1.35; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-swatch { width: 12px; height: 6px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-count { font-size: 11px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-chartcard { padding: 6px; border-width: 1px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-chart { --ls-chart-height: 180px; min-height: 180px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-svg text { font-size: 10px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main :is(.c-ls-base, .c-ls-axisline, .c-ls-tick, .c-ls-grid line, .c-ls-guide) { stroke-width: 1px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-median { stroke-width: 1.5px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-bid { stroke-width: 1.5px; stroke-dasharray: 4 4; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-pt { width: 18px; height: 18px; font-size: 9.5px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-chip { font-size: 10.5px; line-height: 16px; padding: 1px 5px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-readout { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .c-ls-note { font-size: 12px; line-height: 1.45; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .c-ls-well { min-height: 150px; padding: 20px 16px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .c-ls-well > svg { width: 24px; height: 30px; margin-bottom: 12px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .c-ls-well > b { font: 500 14px/1.3 var(--sans); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .c-ls-well > span { margin-top: 6px; font: 400 12.5px/1.45 var(--sans); }
  /* About this watch in the card: readable, and no taller than a screen's half; the arrow shows all of it */
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-layout { max-height: 340px; overflow-y: auto; gap: 14px; font-size: 13px; line-height: 1.5; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-layout h3 { font-size: 22px; line-height: 1.15; margin: 0 0 8px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main :is(.wi-layout h4, .wi-facts header h4) { font-size: 16px; line-height: 1.2; margin: 0 0 6px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-layout p { font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-layout .wi-eyebrow { font-size: 10.5px; letter-spacing: .09em; margin-bottom: 6px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-images { gap: 8px; margin: 10px 0; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main :is(.wi-photo, .wi-images img) { height: 88px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-facts { padding: 12px; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-facts dl > div { gap: 8px; padding: 6px 0; font-size: 12.5px; line-height: 1.35; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-layout :is(.wi-muted, a, figcaption) { font-size: 12px; line-height: 1.4; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-main .wi-layout .wi-link { height: 40px; padding: 0 12px; margin-top: 8px; border-width: 1px; font-size: 13px; }
  /* Ask the Assistant and Search similar lots fill their row (Henry: "should fill their space there"); Collapse details under them */
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 16px; padding: 16px 0 0; }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-btn { height: 44px; padding: 0 8px; border-radius: var(--r1); font: 500 13.5px/1.2 var(--sans); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-fold { grid-column: 1 / -1; justify-self: stretch; justify-content: center; gap: 8px; height: 48px; margin-top: 8px; padding: 0; border-top: 1px solid var(--wlx-hair); font: 400 13.5px/1 var(--sans); color: var(--wlx-sub); }
  #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-fold svg { width: 16px; height: 16px; }
}

/* The whole-screen view of the two tabs (wl-full.js): over the app, under the photo viewer (z-index 40), the Calendar's head */
.wlx-full { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--desk); color: var(--ink); animation: wlxFullIn .18s var(--ease, ease-out) both; }
@keyframes wlxFullIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wlx-full { animation: none; } }
.wlx-full:focus { outline: none; }
.wlx-full-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 12px; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--fill); background: var(--desk); }
.wlx-full-id { flex: 1 1 auto; min-width: 0; }
.wlx-full-k { display: block; margin-bottom: 4px; font: 500 10.5px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.wlx-full-id h2 { margin: 0; font: 400 24px/1.12 var(--serif); letter-spacing: .005em; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.wlx-full-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -10px 0 0; padding: 0; border: 0; border-radius: var(--r1); background: none; color: var(--body); cursor: pointer; }
.wlx-full-close:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.wlx-full-close:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
.wlx-full-body { flex: 1 0 auto; padding: 4px max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.wlx-full-body .wi-tabs { gap: 18px; margin: 0 0 16px; }
.wlx-full-body .wi-tabs button { min-height: 48px; padding: 2px 2px 0; font-size: 14px; }
.wlx-full-body .c-ls-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.wlx-full-body .c-ls-chart { --ls-chart-height: 260px; min-height: 260px; }
.wlx-full-body .c-ls-chartcard { padding: 8px; }
.wlx-full-body .c-ls-compscol { display: block; contain: none; }
.wlx-full-body .c-ls-rows { max-height: none; overflow: visible; }
.wlx-full-body .c-ls-readout { font-size: 13px; line-height: 1.45; }
.wlx-full-body .c-ls-well { min-height: 220px; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .wlx-full-body .c-ls-row { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "ph what amt" "ph what links"; gap: 4px 10px; padding: 10px; }
  .wlx-full-body .c-ls-ph, .wlx-full-body .c-ls-ph .sp-photo { width: 56px; height: 56px; }
  .wlx-full-body .c-ls-row .c-ls-amt b { font-size: 15px; }
  .wlx-full-body .c-ls-row :is(.c-ls-house, .c-ls-date, .c-ls-detail, .c-ls-lot, .c-ls-orig) { font-size: 12px; line-height: 1.35; }
  .wlx-full-body .c-ls-links a { min-height: 36px; font-size: 12px; }
  .wlx-full-body .wi-layout h3 { font-size: 26px; }
  .wlx-full-body .wi-layout p { font-size: 14px; line-height: 1.6; }
}
/* ── R173: END ── */

/* ── R174 (21 October 2026): Settings on a phone. BEGIN ──
   Henry, with screenshots of Account, Billing, API keys, Connectors and Your data: "The settings need to be redone for all the
   components. The desing is wrong the menu should not take up half the screen, we should use icons on the left hand side nav. The
   componentts should be centered ... this needs to look sleek and sexy all the settings tabs." The phone Calendar is the model, as
   for R173: white chrome over a grey ground, white cards with one hairline, an eyebrow label over a large value, its Month and Agenda
   track for every choice, 44px to press, and nothing under 16px to type in. The sections are a rail of icons 56px wide (settings.js
   RAIL); the pane is one column, centred, whose controls take its whole width. Only Carl's app: the desktop app keeps its Settings. */
.set-nav button { display: flex; align-items: center; gap: 10px; }
.set-nav-ico { flex: none; }
button.set-row { width: 100%; background: none; border: 0; border-top: 1px solid rgba(32,30,29,.07); text-align: left; } /* was its inline style (settings.js row) */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  #view > .settings { --st-card: #fff; --st-rail: #fff; grid-template-columns: 56px minmax(0, 1fr); background: var(--desk); }
  html[data-theme="dark"] #view > .settings { --st-card: #191c22; --st-rail: #15181e; }

  /* the rail: ten icons, the one showing tinted as the Calendar's Month is; it scrolls on its own where a landscape phone is short */
  #view > .settings .set-nav { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; border-right: 1px solid var(--fill); background: var(--st-rail); -webkit-mask-image: linear-gradient(to bottom, transparent, black 10px, black calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, transparent, black 10px, black calc(100% - 24px), transparent); } /* where it is cut off, the icons fade, so it reads as more */
  #view > .settings .set-nav::-webkit-scrollbar { display: none; }
  #view > .settings .set-nav .eyebrow { display: none; }
  #view > .settings .set-nav button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r1); background: transparent; color: var(--muted); -webkit-tap-highlight-color: transparent; transition: background .14s, color .14s; }
  #view > .settings .set-nav button:hover { background: transparent; }
  #view > .settings .set-nav button:active { background: var(--subtle); }
  #view > .settings .set-nav button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
  #view > .settings .set-nav button.on, #view > .settings .set-nav button.on:hover { background: var(--tint); color: var(--blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 35%, transparent); }
  #view > .settings .set-nav button.on .set-nav-ico { stroke-width: 2.2; } /* not by colour alone */
  #view > .settings .set-nav-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* the pane: one centred column on the grey ground, the heading as the Calendar's month */
  #view > .settings .set-pane { min-width: 0; padding: 22px 16px max(40px, calc(24px + env(safe-area-inset-bottom))); background: var(--desk); }
  #view > .settings :is(.set-body, .set-body.wide) { width: 100%; max-width: 560px; margin: 0 auto; }
  #view > .settings .set-body > h2 { margin: 0; font: 400 32px/1.08 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
  #view > .settings .set-body > .sub { margin: 8px 0 0; font: 400 15px/1.5 var(--sans); color: var(--muted); text-wrap: pretty; }
  #view > .settings :is(.u-h, .bb-h, .sx-h) { margin: 30px 0 0; font: 400 24px/1.15 var(--serif); letter-spacing: -.005em; color: var(--ink); }
  #view > .settings :is(.eyebrow, .su-step, .su-label, .bb-k, .u-tile-label, .cu-who .eyebrow, .cu-team .eyebrow, .bb-inc h4) { font: 600 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  #view > .settings :is(.set-note, .a-note, .bp-meter-note, .su-hint, .cu-cap, .c-set-note, .u-sub) { font: 400 13px/1.5 var(--sans); color: var(--muted); }
  #view > .settings .set-note { margin: 14px 2px 0; }
  #view > .settings .c-na { font: italic 400 15px/1.5 var(--sans); color: var(--muted); }

  /* every card: white, one hairline, the app's one rounding */
  #view > .settings :is(.set-group, .profile, .su-card, .bb-sum, .bb-plan, .bb-inc, .bb-pay, .u-tile, .u-card, .cu-preview, .cu-card, .sk-created) { border: 1px solid var(--fill); border-radius: var(--r1); background: var(--st-card); box-shadow: none; }
  #view > .settings .set-group { margin-top: 16px; overflow: hidden; }

  /* a row: its label as an eyebrow over its value, what it does at the right, as the Calendar's Session time over 9:48 AM */
  #view > .settings .set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label act" "value act"; align-items: center; gap: 4px 12px; min-height: 60px; padding: 12px 16px; border-top: 1px solid var(--fill); }
  #view > .settings .set-group > .set-row:first-child, #view > .settings .set-group > :first-child > .set-row:first-child { border-top: 0; }
  #view > .settings .set-row > .label { grid-area: label; min-width: 0; font: 600 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  #view > .settings .set-row > .value { grid-area: value; min-width: 0; font: 500 16px/1.35 var(--sans); color: var(--ink); text-align: left; white-space: normal; overflow-wrap: anywhere; }
  #view > .settings .set-row > .value.muted { color: var(--body); }
  #view > .settings .set-row > .value.faint { font-weight: 400; color: var(--muted); }
  #view > .settings .set-row > .value.good { color: var(--good-ink); }
  #view > .settings .set-row > :is(.c-btn, svg, .c-switch, .badge) { grid-area: act; justify-self: end; }
  #view > .settings .set-row > .c-btn ~ .c-btn { grid-area: auto; grid-column: 1 / -1; justify-self: stretch; }
  #view > .settings .set-row > .a-verified { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 5px; font: 600 13px/1.3 var(--sans); color: var(--good-ink); }
  #view > .settings .set-row > .a-verified ~ .c-btn { grid-row: 1 / span 3; }
  #view > .settings button.set-row { width: 100%; font: inherit; color: inherit; cursor: pointer; }
  #view > .settings button.set-row:active { background: var(--subtle); }
  /* a meter: its label, then its bar and its count on one line */
  #view > .settings .set-row:has(> .bar) { grid-template-areas: "label label" "bar value"; }
  #view > .settings .set-row > .bar { grid-area: bar; width: auto; min-width: 0; height: 6px; }
  #view > .settings .set-row:has(> .bar) > .value { justify-self: end; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #view > .settings .bp-meters .set-row { min-height: 0; padding-bottom: 10px; }
  #view > .settings .bp-meter-note { margin: -4px 16px 0; padding-bottom: 12px; }
  /* a switch: its words as a sentence, the switch at the right, a 44px target */
  #view > .settings .set-row:has(> .c-switch) { grid-template-areas: "label act" "note act"; min-height: 56px; }
  #view > .settings .set-row:has(> .c-switch) > .label { font: 400 16px/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
  #view > .settings .set-row > .c-set-note { grid-area: note; }
  #view > .settings .c-switch { width: 46px; height: 28px; }
  #view > .settings .c-switch i { width: 24px; height: 24px; }
  #view > .settings .c-switch.on i { transform: translateX(18px); }
  #view > .settings .c-switch::after { content: ""; position: absolute; inset: -8px -4px; }
  /* a choice, a list, the quiet hours, a field being edited: the label over the control, the control the row's width */
  #view > .settings .set-row:is(:has(> .c-choice), :has(> select), :has(> .c-quiet), .a-edit) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "ctl"; gap: 10px; }
  #view > .settings .set-row > :is(.c-choice, select, .c-quiet, .a-inline) { grid-area: ctl; }

  /* the controls: the Calendar's track for a choice; fields, lists and buttons 44px high, typed at 16px so a phone never zooms */
  #view > .settings .c-choice { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; min-height: 42px; gap: 0; padding: 0; border: 1px solid var(--fill); border-radius: var(--r1); background: var(--desk); overflow: hidden; }
  #view > .settings .c-choice button { min-width: 0; height: auto; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 0; background: transparent; font: 500 14px/1.2 var(--sans); color: var(--body); white-space: normal; text-wrap: balance; box-shadow: none; }
  #view > .settings .c-choice button.on { background: var(--tint); color: var(--blue); font-weight: 600; }
  #view > .settings .c-choice button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
  #view > .settings .c-choice button[disabled] { opacity: .45; }
  #view > .settings :is(.su-input, .su-select, .sk-create input, .sk-key, .c-quiet input, .su-money input) { width: 100%; max-width: none; height: 44px; min-width: 0; padding: 0 12px; border: 1px solid var(--fill); border-radius: var(--r1); background-color: var(--st-card); font: 400 16px/1.2 var(--sans); color: var(--ink); box-shadow: none; }
  #view > .settings select.su-select { padding-right: 36px; } /* room for its arrow: as specific as the rule above, and after it */
  #view > .settings .sk-created .sk-key { font: 500 16px/1.2 var(--mono); } /* readonly, but a phone zooms into any field it focuses under 16px */
  #view > .settings :is(.su-input, .su-select, .sk-create input, .sk-key, .c-quiet input, .su-money input):focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
  #view > .settings .c-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; height: auto; padding: 10px 16px; border-width: 1px; border-radius: var(--r1); font: 600 14px/1.2 var(--sans); white-space: normal; text-align: center; }
  #view > .settings .c-btn.danger:not(.primary) { color: var(--risk-ink); }
  #view > .settings .a-inline, #view > .settings .su-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
  #view > .settings .a-inline > input { flex: 1 1 100%; }
  #view > .settings :is(.a-inline, .su-inline) > .c-btn { flex: 1 1 0; }
  #view > .settings .su-inline > :is(.su-input, .su-money) { flex: 1 1 100%; }
  #view > .settings .c-quiet { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
  #view > .settings .c-quiet input { width: 100%; padding: 0 8px; }
  #view > .settings .c-quiet input::-webkit-calendar-picker-indicator { display: none; } /* a tap opens the phone's own picker; the clock would leave no room for 10:00 PM */
  #view > .settings .c-quiet .c-dot { font: 400 15px/1 var(--sans); color: var(--muted); }
  #view > .settings .c-quiet .c-btn { grid-column: 1 / -1; width: 100%; } /* under the two times, never beside them */
  #view > .settings .a-note { margin: -4px 0 0; padding: 0 16px 14px; }
  #view > .settings .set-action, #view > .settings .set-action:is([data-act="signout"], [data-act="set-logout-all"]) { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin: 12px 0 0; padding: 0 16px; border: 1px solid var(--fill); border-radius: var(--r1); background: var(--st-card); font: 500 15px/1.2 var(--sans); color: var(--ink); text-align: center; vertical-align: initial; }
  #view > .settings .set-action:active { background: var(--subtle); }
  #view > .settings .set-action.danger, #view > .settings .set-action.danger:hover { color: var(--risk-ink); }
  #view > .settings .c-error { margin-top: 16px; }

  /* Account: the person, then their rows */
  #view > .settings .profile { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 16px; }
  #view > .settings .profile .avatar, #view > .settings .profile .avatar auc-mark { width: 52px; height: 52px; }
  #view > .settings .profile .name { font: 600 17px/1.25 var(--sans); color: var(--ink); }
  #view > .settings .profile .email { margin-top: 3px; font: 400 14px/1.4 var(--sans); color: var(--muted); overflow-wrap: anywhere; }

  /* Set up: seven cards in one column, each titled as a Calendar session is */
  #view > .settings .su-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  #view > .settings .su-card { padding: 16px; }
  #view > .settings .su-card h3 { margin: 6px 0 0; font: 400 24px/1.15 var(--serif); color: var(--ink); text-wrap: balance; }
  #view > .settings .su-sub { margin: 6px 0 14px; font: 400 14px/1.5 var(--sans); color: var(--muted); }
  #view > .settings .su-body { gap: 14px; }
  #view > .settings .su-body > .c-choice { align-self: stretch; }
  #view > .settings .su-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #view > .settings .su-money { display: flex; align-items: center; gap: 8px; max-width: none; }
  #view > .settings .su-cur { flex: none; font: 600 15px/1 var(--sans); color: var(--muted); }
  #view > .settings :is(.su-chips, .lim-chips) { gap: 8px; }
  #view > .settings :is(.su-chips, .lim-chips) .lim-chip { height: 40px; padding: 0 14px; border: 1px solid var(--fill); background: var(--st-card); font: 500 14px/1 var(--sans); color: var(--ink); }
  #view > .settings :is(.su-chips, .lim-chips) .lim-chip.on { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
  #view > .settings .su-foot { justify-content: stretch; }
  #view > .settings .su-unsaved { flex: 1 1 100%; margin: 0; font: 500 13px/1.4 var(--sans); }
  #view > .settings .su-finish { display: grid; gap: 8px; margin-top: 20px; }
  #view > .settings .su-done-btn { width: 100%; height: 48px; font-size: 15px; }
  #view > .settings .su-finish .su-sub { margin: 0; }

  /* Customise: the mark at work, then the eight to choose from, four to a row, then the team */
  #view > .settings .cu-preview { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "orb who" "work work"; align-items: center; gap: 12px 16px; margin-top: 20px; padding: 16px; } /* the mark at work under it, the card's width: a 320px phone has no room beside the orb */
  #view > .settings .cu-preview .cu-big { grid-area: orb; width: 84px; height: 84px; }
  #view > .settings .cu-preview .cu-big auc-mark { width: 84px; height: 84px; }
  #view > .settings .cu-who { grid-area: who; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  #view > .settings .cu-who .cu-name { font: 400 28px/1.05 var(--serif); color: var(--ink); }
  #view > .settings .cu-work { grid-area: work; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; margin-left: 0; } /* R192 (21 October 2026, Henry: "remove that whitespace in the settings tab below the icon and row of icons, they should be closer"): a row, where app.css's column (and its margin-left: auto) made the caption's 140px below a height, 140px of white under the line, and pushed the pill off the card's edge */
  #view > .settings .cu-work .cu-cap { flex: 1 1 140px; min-width: 0; }
  #view > .settings .cu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  #view > .settings .cu-card { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 4px 8px; }
  #view > .settings .cu-card .cu-orb, #view > .settings .cu-card auc-mark { width: 48px; height: 48px; }
  #view > .settings .cu-card .cu-name { font: 500 13px/1.2 var(--sans); color: var(--ink); }
  #view > .settings .cu-card.on { border-color: var(--blue); background: var(--tint); }
  #view > .settings .cu-team { margin-top: 24px; }
  #view > .settings .cu-teams { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  #view > .settings .cu-team-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--fill); border-radius: var(--r1); background: var(--st-card); font: 500 14px/1 var(--sans); color: var(--ink); }
  #view > .settings .cu-team-btn.on { border-color: var(--blue); background: var(--tint); }

  /* Billing: the plan in a card of four figures, the plans as rows to pick, what each includes, the meters, Stripe */
  #view > .settings .bb-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; padding: 16px; }
  #view > .settings .bb-sum-f { gap: 4px; }
  #view > .settings .bb-v { font: 600 16px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
  #view > .settings .bb-sum-btn, #view > .settings .bb-pay .c-btn { grid-column: 1 / -1; width: 100%; margin: 0; }
  #view > .settings .bb-pricing { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 12px; }
  #view > .settings .bb-plans { gap: 8px; }
  #view > .settings .bb-plan { flex-wrap: wrap; gap: 4px 12px; min-height: 60px; padding: 12px 16px; } /* on a narrow phone the price takes a line of its own, never two */
  #view > .settings .bb-radio { width: 20px; height: 20px; border: 1.5px solid var(--fill); background: var(--st-card); }
  #view > .settings .bb-plan-name { flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; font: 600 16px/1.3 var(--sans); color: var(--ink); } /* Current plan under the name, so the price keeps its line */
  #view > .settings .bb-plan-price { min-width: 0; text-align: right; }
  #view > .settings .bb-plan-price:not(.na) { font: 600 16px/1.25 var(--sans); color: var(--ink); white-space: nowrap; }
  #view > .settings .bb-plan-price.na { font: 500 14px/1.4 var(--sans); color: var(--muted); }
  #view > .settings .bb-plan:has(input:checked) { border-color: var(--blue); background: var(--tint); }
  #view > .settings .bb-plan:has(input:checked) :is(.bb-plan-name, .bb-plan-price:not(.na)) { color: var(--ink); }
  #view > .settings .bb-plan:has(input:checked) .bb-radio { border-color: var(--blue); background: var(--st-card) radial-gradient(circle, var(--blue) 0 40%, transparent 44%); }
  #view > .settings .bb-inc { padding: 16px; }
  #view > .settings .bb-inc li { padding: 10px 0; font: 400 14px/1.4 var(--sans); }
  #view > .settings .bb-inc .c-btn { width: 100%; }
  #view > .settings .bb-pay { display: grid; gap: 12px; margin-top: 12px; padding: 16px; }
  #view > .settings .bb-pay p { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--body); }

  /* Usage: the day's turns across the top, the month's two figures side by side, each label over its figure; the charts in cards */
  #view > .settings .u-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; margin-top: 20px; }
  #view > .settings .u-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; }
  #view > .settings .u-tile.ring { grid-column: 1 / -1; }
  #view > .settings .u-tile-label { order: -1; }
  #view > .settings .u-tile-main { display: flex; align-items: center; gap: 12px; }
  #view > .settings .u-tile-value:not(.na) { font: 600 24px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
  #view > .settings .u-tile-value.na { font: italic 400 15px/1.4 var(--sans); color: var(--muted); }
  #view > .settings .u-tile-sub { font: 400 13px/1.45 var(--sans); color: var(--muted); }
  #view > .settings .u-card { margin-top: 12px; padding: 16px; overflow: hidden; }
  #view > .settings .u-scroll { max-width: none; margin: 0 -16px; padding: 0 16px; overscroll-behavior-x: contain; }
  #view > .settings .u-table { width: max-content; min-width: 100%; font-size: 13px; }
  #view > .settings .u-table :is(th, td), #view > .settings .u-models :is(thead th, tbody th) { white-space: nowrap; overflow-wrap: normal; min-width: 0; }
  #view > .settings .u-card h3 { margin: 0; font: 400 22px/1.2 var(--serif); color: var(--ink); }
  #view > .settings .u-legend { flex-wrap: wrap; gap: 6px 14px; }

  /* API keys: the name over Create key, each key's name over its details, the routes in a box that scrolls on its own */
  #view > .settings .sk-create .set-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ctl" "act"; gap: 10px; }
  #view > .settings .sk-create .set-row > input { grid-area: ctl; }
  #view > .settings .sk-create .set-row > .c-btn { grid-area: act; justify-self: stretch; }
  #view > .settings .sk-created { margin-top: 16px; padding: 16px; border-color: var(--blue); background: var(--tint); }
  #view > .settings .sk-keyline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  #view > .settings .sk-warn { font-size: 14px; }
  #view > .settings .sk-item { grid-template-areas: "main act" "badge act"; align-items: center; }
  #view > .settings .sk-item > .sk-main { grid-area: main; min-width: 0; }
  #view > .settings .sk-item > .badge { grid-area: badge; justify-self: start; }
  #view > .settings .sk-name { font: 600 16px/1.35 var(--sans); }
  #view > .settings .sk-meta { font: 400 13px/1.5 var(--sans); }
  #view > .settings .sk-seg { white-space: normal; }
  #view > .settings .sk-confirm .c-btn + .c-btn { margin: 8px 0 0; }
  #view > .settings .sk-confirm .c-btn { width: 100%; }
  #view > .settings .sk-routes { max-width: 100%; margin: 8px 0 4px; padding: 12px; border: 1px solid var(--fill); background: var(--st-card); font: 500 12px/1.6 var(--mono); overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Execute: the plan's line over its button, the headings as Billing's */
  #view > .settings .sx-status .set-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "act"; gap: 12px; }
  #view > .settings .sx-status .set-row > .label { font: 400 16px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
  #view > .settings .sx-status .set-row > .c-btn { justify-self: stretch; }
  #view > .settings .ex-field { max-width: none; font: 600 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  #view > .settings .ex-field input { height: 44px; padding: 0 12px; border: 1px solid var(--fill); border-radius: var(--r1); font: 500 16px/1.2 var(--mono); letter-spacing: 0; text-transform: none; }
  #view > .settings .ex-summary { border-radius: var(--r1); font-size: 14px; }
  #view > .settings .ex-btns { gap: 8px; }
  #view > .settings .ex-btns > .c-btn { flex: 1 1 auto; text-decoration: none; }
  #view > .settings .set-body > .c-btn { width: 100%; margin-top: 12px; }
}
/* ── R174: END ── */

/* 21 October 2026 (Henry: "we need to design this margins tab for mobile ... the lots design needs to be entirely consistent and the design should
   be entirely consistent with the rest of the design ... i want enterprise clients to be able to work from phone"): the Margin view on a phone
   (views/margins.js, the phone section), as the canvas has it (https://claude.ai/artifact/LqU5gyJM3QZxdK1T6vD1Jp). The window is the title's
   picker (the Calendar's cal-pick and cal-picker), the view is the Calendar's track (cal-modes on a phone), the search box has the Watchlist's
   filters button beside it (wl-control-toggle), the band tabs are a row of chips, and each lot is the Watchlist's phone card (Search's): #mg-body
   carries .wl-lots, so every ".wl-lots .sr-table" rule above draws them, open and closed, as it draws the saved lots. What is this view's alone is
   below: the head, the picker, the track, the bar, the filters, the chips, a group's row and head, the open card's details and the empty window.
   Kept at the end: it outranks the view's desktop rules in app.css by coming after them. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  #margins.pane[data-phone] { padding-top: 8px; }
  /* the head: the window as the serif title with its chevron, the sub-line under it, Refresh at the right on the title's baseline */
  #margins .mg-ph-head { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 10px; }
  #margins .mg-ph-title { position: relative; flex: 1 1 auto; min-width: 0; }
  #margins .mg-ph-title h2 { margin: 0; font: 400 26px/1.15 var(--serif); letter-spacing: -.004em; -webkit-text-stroke: .015em currentColor; }
  #margins .mg-pick { display: inline-flex; align-items: flex-end; gap: 6px; max-width: 100%; margin: -2px -8px; padding: 2px 8px; border: 0; border-radius: var(--r1); background: none; color: inherit; font: inherit; letter-spacing: inherit; -webkit-text-stroke: inherit; text-align: left; cursor: pointer; }
  #margins .mg-pick > span { min-width: 0; }
  #margins .mg-pick-i { flex: none; margin-bottom: 4px; color: var(--body); transition: transform .18s var(--ease), color .16s; } /* on the title's last line, where a title of two lines ("Everything coming to auction") wraps */
  #margins .mg-pick[aria-expanded="true"] .mg-pick-i { transform: rotate(180deg); color: var(--blue); }
  #margins .mg-picker { position: absolute; z-index: 30; top: calc(100% + 6px); left: -8px; right: -8px; padding: 6px; border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); background: var(--desk); box-shadow: 0 12px 32px rgba(20,24,40,.16), 0 2px 6px rgba(20,24,40,.08); }
  #margins .mg-picker[hidden] { display: none; }
  #margins .mg-win { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r1); background: transparent; font: 400 15px/1.2 var(--sans); color: var(--ink); text-align: left; }
  #margins .mg-win.on { background: var(--tint); color: var(--blue-hover); font-weight: 600; }
  #margins .mg-subline { margin: 4px 0 0; font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
  #margins .mg-subline:empty { display: none; }
  #margins .mg-ph-head > .c-btn { flex: none; height: 44px; min-height: 44px; padding-inline: 12px; font-size: 12px; }
  /* the view: the Calendar's track on a phone (a 36px pale track, the view on screen solid blue to the track's edge) */
  #margins .mg-modes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 36px; margin: 0 0 10px; border-radius: var(--r1); background: color-mix(in srgb, var(--ink) 5%, var(--desk)); box-shadow: inset 0 0 0 1px rgba(32,30,29,.12); }
  #margins .mg-mode { position: relative; min-width: 0; height: 36px; padding: 2px 2px 0; border: 0; border-radius: var(--r1); background: transparent; font: 400 12.5px/1 var(--sans); color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #margins .mg-mode.on { background: var(--cal-solid, #3154d5); color: #fff; }
  #margins .mg-mode::after { content: ""; position: absolute; inset: -4px 0; } /* the 44px target behind the 36px track */
  /* the bar: the search box, and the filters button as the Watchlist's (a dot on it while a condition is chosen) */
  #margins .mg-ph-bar { display: flex; gap: 8px; margin: 0 0 10px; }
  #margins .mg-ph-bar .sc-q { flex: 1 1 auto; width: auto; min-width: 0; height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--fill); border-radius: var(--r1); background: var(--desk); color: var(--ink); font: 400 16px/1.2 var(--sans); }
  #margins .mg-ftoggle { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--fill); border-radius: var(--r1); background: var(--desk); color: var(--ink); }
  #margins .mg-ftoggle[aria-expanded="true"] { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
  #margins .mg-ftoggle.set::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
  /* under the bar while the filters are open: the window and the sort on tracks, the condition as chips */
  #margins .mg-ph-filters { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; padding: 12px; border: 1px solid var(--fill); border-radius: var(--r1); background: var(--desk); }
  #margins .mg-ph-filters[hidden] { display: none; }
  #margins .mg-f-k { display: block; margin: 0 0 8px; font: 500 10px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  #margins .mg-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 3px; border-radius: var(--r1); background: color-mix(in srgb, var(--ink) 5%, var(--desk)); box-shadow: inset 0 0 0 1px rgba(32,30,29,.12); }
  #margins .mg-opt { min-width: 0; height: 38px; padding: 0 4px; border: 0; border-radius: var(--r1); background: transparent; font: 500 12.5px/1 var(--sans); color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #margins .mg-opt.on { background: var(--cal-solid, #3154d5); color: #fff; }
  #margins .mg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  #margins .mg-chip { height: 40px; padding: 0 14px; border: 1px solid rgba(32,30,29,.16); border-radius: var(--r1); background: var(--desk); font: 500 13px/1 var(--sans); color: var(--ink); }
  #margins .mg-chip.on { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
  #margins .mg-chip.clear { border-style: dashed; color: var(--muted); }
  /* the band tabs: one row of chips with their counts, scrolling sideways to the screen's edge; the one in force in the chosen wash */
  #margins .mg-tabs { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 -16px 10px; padding: 0 16px; border-radius: 0; background: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #margins .mg-tabs::-webkit-scrollbar { display: none; }
  #margins .mg-tab { flex: none; gap: 5px; min-height: 32px; padding: 0 11px; border: 1px solid rgba(32,30,29,.16); background: var(--desk); font: 500 12.5px/1 var(--sans); color: var(--ink); }
  #margins .mg-tab .n { font: 400 12px/1 var(--sans); color: var(--muted); }
  #margins .mg-tab.on { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
  #margins .mg-tab.on .n { color: var(--blue-hover); font-weight: 600; }
  /* a group: its name, its facts and its best Margin, opening onto its lots; open, a head that leads back */
  #margins .mg-grps { display: flex; flex-direction: column; gap: 8px; }
  #margins .mg-grp-main { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 10px 12px 14px; border: 1px solid var(--wlc-hair, rgba(32,30,29,.1)); border-radius: var(--r1); background: var(--desk); box-shadow: var(--tile-shadow); color: var(--ink); font: inherit; text-align: left; }
  #margins .mg-grp-text { min-width: 0; }
  #margins .mg-grp-name { display: block; font: 400 18px/1.2 var(--serif); -webkit-text-stroke: .015em currentColor; overflow-wrap: anywhere; }
  #margins .mg-grp-sub { display: block; margin-top: 4px; font: 400 11.5px/1.3 var(--sans); color: var(--muted); }
  #margins .mg-grp-best { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
  #margins .mg-grp-best .c-fig-k { font-size: 9px; }
  #margins .mg-grp-pill { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 6px; }
  #margins .mg-grp .sc-chev { color: var(--chev); }
  #margins .mg-grp-head { margin: 0 0 10px; }
  #margins .mg-back { display: inline-flex; align-items: center; gap: 2px; height: 32px; margin-left: -6px; padding: 0 6px; border: 0; background: none; font: 600 13px/1 var(--sans); color: var(--blue-hover); }
  #margins .mg-back svg { transform: rotate(180deg); }
  #margins .mg-grp-head h3 { margin: 2px 0 0; font: 400 24px/1.15 var(--serif); letter-spacing: -.004em; -webkit-text-stroke: .015em currentColor; }
  #margins .mg-grp-head .mg-grp-sub { margin: 4px 0 0; }
  /* the open card's details, under the card's strip as the Watchlist's Past sales panel sits: the sentences, the photos, Watch, "Wrong label?" */
  #margins .wl-lots .sr-table.c-wl-table[data-view] .c-wl-row > .mg-ph-details { grid-column: 1 / -1; grid-row: 7; margin-top: 8px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--wlc-hair, rgba(32,30,29,.1)); border-radius: 0; background: none; }
  #margins .mg-ph-lines p { margin: 8px 0 0; font: 400 13.5px/1.45 var(--sans); color: var(--body); }
  #margins .mg-ph-lines p:first-child { margin-top: 0; }
  #margins .mg-ph-lines b { color: var(--ink); }
  #margins .mg-ph-details .gallery { display: flex; gap: 8px; margin: 12px 0 0; overflow-x: auto; scrollbar-width: none; }
  #margins .mg-ph-details .gallery::-webkit-scrollbar { display: none; }
  #margins .mg-ph-details .shot { flex: none; width: 96px; height: 96px; padding: 0; border: 0; border-radius: var(--r1); overflow: hidden; background: var(--wlc-fill, var(--fill)); }
  #margins .mg-ph-details .shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
  #margins .mg-ph-acts { margin: 12px 0 0; }
  #margins .mg-ph-acts .mg-watch { width: 100%; height: 48px; font-size: 15px; }
  #margins .mg-ph-acts .mg-watch.on { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
  #margins .mg-ph-details .lr-slot { margin-top: 10px; }
  /* the closed card's figures: the Margin is this view's point, so its cell takes a little more of the row than the Watchlist's gives it,
     and a reason in place of a figure ("no value yet", most lots) fits the cell on one line */
  #margins .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open) .c-wl-figures { grid-template-columns: minmax(0, .95fr) minmax(0, .85fr) minmax(0, 1.2fr); } /* at 390px: 79, 70 and 100px; "2h 48m" keeps its line in the middle, and "no value yet" its own at the right (the cell's own 19px of left padding counted) */
  #margins .wl-lots .sr-table.c-wl-table[data-view] > .c-wl-row:not(.open) .c-wl-margin > .c-na { font-size: 12.5px; letter-spacing: -.01em; }
  /* the loader (the Watchlist's card skeleton) keeps the height of what it replaced (data-hold) */
  #margins .mg-ph-stage { min-height: 120px; }
  /* the empty window: the sentence, and the wider windows to show */
  #margins .mg-ph-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 20px; border: 1px solid var(--wlc-hair, rgba(32,30,29,.1)); border-radius: var(--r1); background: var(--desk); box-shadow: var(--tile-shadow); text-align: center; }
  #margins .mg-ph-empty p { margin: 0; font: 400 14px/1.45 var(--sans); color: var(--body); }
  #margins .mg-ph-empty-acts { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }
  #margins .mg-ph-empty-acts .c-btn { height: 44px; font-size: 14px; }
  #margins[data-phone] .mg-note { font-size: 11.5px; }
  /* the bar of four (index.html): the chosen tab's wash fits a cell narrower than its 94.5px on a narrow phone */
  .mobile-nav button::before { width: min(94.5px, calc(100% - 4px)); margin-left: 0; transform: translateX(-50%); }
}