/* Authored demo layout, 2026-10-28. Load AFTER auction-live.css.
 * Original CSS geometry only; no imported fonts/images/libraries. Existing
 * product SVG/font provenance and obligations: asset-register.html.
 * All overrides are scoped to the demo, including the keyboard viewport. */
.demo-auction-dialog { border-color: #e1d5c5; }
.demo-auction-dialog .detail-content { overflow: hidden; }
[data-demo-auction] .auction-topbar { height: auto; min-height: 78px; padding-block: 8px; }
[data-demo-auction] .auction-topbar p { margin-top: 3px; color: #e2cfc4; font-size: 11px; line-height: 1.4; }
[data-demo-auction] .demo-auction-selector { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
[data-demo-auction] .demo-auction-selector a { display: grid; align-content: center; gap: 3px; min-width: 0; min-height: 48px; padding: 7px 10px; border: 1px solid #fff8ed55; border-radius: 8px; color: #fff8ed; text-decoration: none; line-height: 1.4; }
[data-demo-auction] .demo-auction-selector a[aria-current="page"] { border-color: #f7c966; background: #fff8ed; color: #3e2f31; }
[data-demo-auction] .demo-auction-selector strong { font-size: 12px; }
[data-demo-auction] .demo-auction-selector span { font-size: 10px; font-variant-numeric: tabular-nums; }
[data-demo-auction] .demo-auction-selector a:focus-visible { outline: 2px solid #f7c966; outline-offset: 2px; }
[data-demo-auction] .auction-showcase { height: clamp(96px, 18cqh, 156px); }
[data-demo-auction] .auction-art { width: 126px; flex-basis: 126px; }
[data-demo-auction] .auction-main,
[data-demo-auction] .auction-chat { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
[data-demo-auction] .auction-chat { display: flex; flex-direction: column; }
[data-demo-auction] .auction-chat > * { flex: 0 0 auto; min-width: 0; }
[data-demo-auction] .chat-messages { flex: 1 0 128px; min-height: 128px; overflow: auto; }
[data-demo-auction] .chat-connection { display: block; max-height: none; overflow: visible; font-size: 11px; line-height: 1.5; }
[data-demo-auction] .chat-nickname { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; margin: 0; }
[data-demo-auction] .chat-nickname input { width: 100%; min-width: 0; min-height: 40px; font-size: 16px; }
[data-demo-auction] .chat-nickname button { min-width: 44px; min-height: 40px; }
[data-demo-auction] .chat-footer { display: block; line-height: 1.6; }
[data-demo-auction] .chat-form { margin: 0; }
[data-demo-auction] .chat-form textarea { width: 100%; font-size: 16px; resize: none; scroll-margin: 10px; }
[data-demo-auction] .chat-form button { min-height: 44px; }
[data-demo-auction] [data-demo-chat-length] { color: var(--auction-muted); font-size: 10px; white-space: nowrap; }
[data-demo-auction] [data-demo-retry] { align-self: flex-start; min-height: 40px; padding: 5px 10px; border: 1px solid #d4b58b; border-radius: 8px; color: #70534b; background: #fff8ed; font-size: 12px; }
[data-demo-auction] [data-demo-bid-form] { display: grid; gap: 7px; margin: 0; }
[data-demo-auction] .bid-amount input { min-height: 30px; font-size: 20px; }
[data-demo-auction] [data-demo-bid-submit] { display: flex; width: 100%; min-height: 46px; padding: 10px 8px; border: 1px solid #3e2f31; border-radius: 9px; background: #3e2f31; color: #fff8ed; font-size: 14px; font-weight: 750; }
[data-demo-auction] .wallet-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; }
[data-demo-auction] .wallet-summary dl > div { min-width: 0; }
[data-demo-auction] .wallet-summary dt { color: var(--auction-muted); font-size: 11px; }
[data-demo-auction] .wallet-summary dd { margin: 2px 0 0; font-size: clamp(16px, 2vw, 23px); font-variant-numeric: tabular-nums; letter-spacing: -.5px; overflow-wrap: anywhere; }
[data-demo-auction] .demo-wallet-holds { padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--auction-line); font-size: 11px; line-height: 1.6; }
[data-demo-auction] .wallet-summary > small { display: block; margin-top: 5px; color: var(--auction-muted); font-size: 10px; line-height: 1.6; }
[data-demo-auction] .demo-auction-rule { padding: 8px 10px; border: 1px solid var(--auction-line); border-radius: 9px; background: #fff8ed; font-size: 11px; line-height: 1.6; }
[data-demo-auction] .demo-auction-rule strong { font-size: 12px; }
[data-demo-auction] .demo-auction-rule small { display: block; color: var(--auction-muted); font-size: 10px; }
[data-demo-auction] [data-demo-extensions] { margin-top: 4px; font-weight: 700; }
[data-demo-auction] .wallet-back { display: block; min-height: 40px; margin: 0; padding: 6px 2px; color: #70534b; font-size: 12px; line-height: 1.5; white-space: normal; }
[data-demo-auction] .bid-feedback { display: block; min-height: 0; max-height: none; overflow: visible; margin: 0; font-size: 11px; line-height: 1.6; -webkit-line-clamp: unset; }
[data-demo-auction] [data-demo-feedback]:empty { display: none; }
[data-demo-auction] .auction-event-status { display: block; }
[data-demo-auction] .auction-price-board > small { display: block; }
[data-demo-auction] [data-demo-summary] { padding: 12px; border: 1px solid #d4b58b; border-radius: 10px; background: #fff8ed; }
[data-demo-auction] [data-demo-summary] h3 { font-size: 15px; }
[data-demo-auction] [data-demo-summary] p { margin-block: 7px; font-size: 14px; font-weight: 700; line-height: 1.5; }
[data-demo-auction] [data-demo-summary] small { color: var(--auction-muted); font-size: 11px; line-height: 1.5; }
[data-demo-auction] [data-demo-host-controls] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--auction-line); }
[data-demo-auction] [data-demo-host-controls] > span { width: 100%; color: var(--auction-muted); font-size: 10px; }
[data-demo-auction] [data-demo-host-controls] button { min-height: 40px; padding: 8px 10px; border: 1px solid #d4b58b; border-radius: 8px; background: #fff8ed; color: #3e2f31; font-size: 12px; }
[data-demo-auction] :where(button, input, textarea) { scroll-margin-block: 12px; }
[data-demo-auction] :where(button, input, textarea):focus-visible { outline-offset: -2px; }

@media (max-width: 600px) {
  [data-demo-auction] .auction-topbar { min-height: 76px; }
  [data-demo-auction] .auction-topbar h2 { font-size: 16px; }
  [data-demo-auction] .auction-topbar p { font-size: 9px; }
  [data-demo-auction] .auction-showcase { padding: 8px; }
  [data-demo-auction] .auction-art { width: 80px; flex-basis: 80px; }
  [data-demo-auction] .auction-layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  [data-demo-auction] .auction-main,
  [data-demo-auction] .auction-chat { padding: 8px 6px; gap: 7px; }
  [data-demo-auction] .chat-nickname { grid-template-columns: minmax(0, 1fr) 44px; gap: 4px; }
  [data-demo-auction] .chat-nickname label { grid-column: 1 / -1; font-size: 11px; }
  [data-demo-auction] .chat-nickname input { padding-inline: 5px; }
  [data-demo-auction] .chat-header { flex-wrap: wrap; }
  [data-demo-auction] .chat-header h3 { font-size: 12px; }
  [data-demo-auction] .chat-connection { font-size: 10px; }
  [data-demo-auction] .chat-form { grid-template-columns: minmax(0, 1fr); }
  [data-demo-auction] .chat-form > div { flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; }
  [data-demo-auction] .chat-form button { padding: 6px 9px; font-size: 12px; }
  [data-demo-auction] .chat-form textarea { min-height: 72px; }
  [data-demo-auction] .chat-footer { font-size: 10px; }
  [data-demo-auction] .wallet-summary dl { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  [data-demo-auction] .wallet-summary dt { font-size: 10px; }
  [data-demo-auction] .wallet-summary dd { font-size: 18px; }
  [data-demo-auction] .bid-amount { padding-inline: 5px; }
  [data-demo-auction] .bid-amount input { font-size: 16px; }
  [data-demo-auction] [data-demo-bid-submit] { font-size: 12px; white-space: normal; }
  [data-demo-auction] .auction-price-board strong { font-size: min(27px, 15cqi); }
  [data-demo-auction] [data-demo-summary] { padding: 8px; }
  [data-demo-auction] [data-demo-summary] h3,
  [data-demo-auction] [data-demo-summary] p { font-size: 12px; }
}
@container auction-room (max-height: 500px) {
  [data-demo-auction] .auction-topbar { min-height: 58px; }
  [data-demo-auction] .auction-showcase { height: 64px; padding-block: 5px; }
  [data-demo-auction] .auction-art { width: 52px; flex-basis: 52px; }
  [data-demo-auction] .auction-item-copy h3 { font-size: 13px; }
  [data-demo-auction] .auction-item-copy > small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-demo-auction], [data-demo-auction] * { scroll-behavior: auto; }
  [data-demo-auction] button { transition: none; }
}

/* Keep current price and bidding controls ahead of optional explanation. */
[data-demo-auction] .auction-price-board{position:sticky;top:0;z-index:2}
[data-demo-auction] .demo-auction-rule summary,[data-demo-auction] .demo-wallet-detail summary{cursor:pointer;font-size:11px;line-height:1.5}
[data-demo-auction] .demo-auction-rule p{margin-top:7px}
[data-demo-auction] .demo-wallet-detail{margin-top:5px;color:#70534b}
[data-demo-auction] .demo-wallet-detail small{display:block;font-size:10px;line-height:1.5}