/* /market — auction market (docs/ENCHERES.md §4). Paper slips, ink tabs, red stamps (docs/DESIGN.md):
 * wallet strip, rayons (tabs), toolbar with chip filters (a bottom drawer on phones), auction cards
 * with a live countdown and the inline bid. Imported by the /market segment only. */
@layer pages {
  .mkt { display: grid; gap: 0; }
  .mkt ul { list-style: none; margin: 0; padding: 0; }
  .mkt[data-pending] .mkt-grid { opacity: 0.55; transition: opacity 120ms linear 120ms; pointer-events: none; }

  /* ---------------------------------------------------------- header */
  .mkt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.6rem 2rem;
    margin-bottom: 1.4rem;
  }
  .mkt-head h1 { margin: 0; }
  .mkt-head-lede { max-width: 46ch; font-size: 0.98rem; }
  .mkt-wallet {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    border: var(--rule-thick);
    background: var(--paper-lift);
    box-shadow: var(--drop);
    rotate: 0.6deg;
  }
  .mkt-wallet-cell { display: grid; gap: 0.25rem; padding: 0.55rem 1rem 0.6rem; border-right: 1px dashed var(--ink-soft); }
  .mkt-wallet-cell:last-child { border-right: 0; }
  .mkt-wallet dt, .mkt-wallet dd { padding: 0; border: 0; }
  .mkt-wallet dd { font: 400 1.55rem/1 var(--font-display); letter-spacing: 0.02em; white-space: nowrap; }
  .mkt-wallet-cell:nth-child(2) dd { color: var(--stamp); }
  .mkt-wallet-cell[data-hot] { background: var(--ink); color: var(--paper); }
  .mkt-wallet-cell[data-hot] a { color: var(--paper); text-decoration-color: var(--stamp); }
  .mkt-wallet-cell[data-hot] a:hover { background: var(--stamp); }

  /* ---------------------------------------------------------- tabs */
  .mkt-tabs { margin-bottom: 1.1rem; overflow-x: auto; scrollbar-width: none; padding: 0.3rem 0.4rem 0.6rem 0.1rem; margin-inline: -0.1rem; }
  .mkt-tabs::-webkit-scrollbar { display: none; }
  .mkt-tabs ul { display: flex; gap: 0.6rem; width: max-content; }
  .mkt-tabs a {
    display: block;
    padding: 0.55rem 0.95rem 0.42rem;
    border: var(--rule);
    background: var(--paper);
    font: 400 1.05rem/1 var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: rotate 120ms var(--ease-snap), translate 120ms var(--ease-snap);
  }
  .mkt-tabs a:hover { background: var(--paper-lift); color: var(--ink); translate: 0 -2px; }
  .mkt-tabs a[aria-current="page"] {
    background: var(--ink);
    color: var(--paper);
    rotate: -1.5deg;
    box-shadow: 3px 3px 0 var(--stamp);
  }

  /* ---------------------------------------------------------- toolbar */
  .mkt-toolbar {
    margin: 0 0 1.6rem;
    padding: 0.8rem 1rem 0.7rem;
    border: var(--rule);
    border-left-width: 10px;
    background: var(--paper-lift);
  }
  .mkt-toolbar label { margin: 0; }
  .mkt-toolbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1rem; }
  .mkt-toolbar-side { display: flex; align-items: flex-end; gap: 0.6rem; }
  .mkt-search { display: flex; align-items: flex-end; gap: 0.6rem; flex: 1 1 16rem; min-width: 0; }
  .mkt-search label { flex: 1; }
  .mkt-search input { width: 100%; max-width: 26rem; }
  .mkt-hint { font: 600 0.7rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; padding-bottom: 0.7rem; }
  .mkt-sort { display: flex; flex-direction: column; gap: 0.3rem; }
  .mkt-sort > label { font: 600 0.72rem/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }

  .mkt-inline-filters { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--ink-soft); }
  .mkt-groups { display: flex; flex-wrap: wrap; gap: 0.7rem 1.6rem; }
  .mkt-chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
  .mkt-chip-group > ul { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .mkt-chip-group-price { gap: 0.4rem 0.9rem; }
  .mkt-chip-legend { font: 600 0.68rem/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; min-width: 4.2rem; }
  .mkt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-height: 2rem;
    padding: 0.35rem 0.6rem 0.25rem;
    border: 1.5px solid var(--ink);
    background: var(--paper);
    font: 400 0.9rem/1 var(--font-display);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }
  .mkt-chip:hover { background: var(--paper-lift); color: var(--ink); }
  .mkt-chip[aria-current] { background: var(--ink); color: var(--paper); rotate: -1.5deg; box-shadow: 2px 2px 0 var(--stamp); }
  .mkt-chip[aria-current]:hover { background: var(--stamp); color: var(--paper); }
  .mkt-active .mkt-chip::after { content: "✕"; font-size: 0.75em; color: var(--stamp); }
  .mkt-active .mkt-chip:hover::after { color: var(--paper); }

  .mkt-price { display: flex; align-items: center; gap: 0.35rem; }
  .mkt-price > label { font: 600 0.66rem/1 var(--font-mono); letter-spacing: 0.08em; }
  .mkt-price input[type="number"] { width: 5.6rem; min-height: 2rem; padding: 0.25rem 0.4rem; }
  .mkt-price-go { min-height: 2rem; padding: 0.3rem 0.6rem 0.2rem; font-size: 0.9rem; box-shadow: 2px 2px 0 var(--btn-shadow); }

  .mkt-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.7rem; }
  .mkt-total { font: 600 0.78rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
  .mkt-active { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.8rem; }
  .mkt-active > ul { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .mkt-reset { font: 600 0.75rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

  .mkt-count-stamp {
    display: inline-grid;
    place-items: center;
    min-width: 1.35em;
    height: 1.35em;
    margin-left: 0.35em;
    padding: 0 0.2em;
    background: var(--stamp);
    color: var(--paper);
    font: 600 0.75em/1 var(--font-mono);
    rotate: 8deg;
  }

  /* Phones: the chips move into a bottom drawer, the button opens it. */
  .mkt-drawer-btn { display: none; }
  @media (max-width: 760px) {
    .mkt-inline-filters, .mkt-toolbar-side > .mkt-sort { display: none; }
    .mkt-drawer-btn { display: inline-flex; }
    .mkt-toolbar { padding: 0.7rem 0.75rem 0.6rem; border-left-width: 6px; }
    .mkt-search { flex-basis: 100%; }
    .mkt-search input { max-width: none; }
    .mkt-toolbar-row { flex-wrap: nowrap; }
  }
  .mkt-drawer {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    margin: auto 0 0;
    padding: 0;
    border: 0;
    border-top: 4px solid var(--stamp);
    background: var(--paper);
    color: var(--ink);
    overflow: hidden;
  }
  .mkt-drawer[open] { animation: mkt-sheet-in 220ms var(--ease-snap); }
  .mkt-drawer::backdrop { background: color-mix(in srgb, var(--ink) 55%, transparent); }
  .mkt-drawer-sheet { display: flex; flex-direction: column; max-height: 88dvh; }
  .mkt-drawer-sheet > .mkt-groups, .mkt-drawer-sheet > .mkt-sort { padding: 0 1rem; }
  .mkt-drawer-sheet > .mkt-sort { margin-bottom: 0.9rem; }
  .mkt-drawer-sheet > .mkt-groups { flex-direction: column; gap: 0.9rem; overflow-y: auto; padding-bottom: 1rem; }
  .mkt-drawer .mkt-chip-group { flex-direction: column; align-items: flex-start; }
  .mkt-drawer .mkt-chip { min-height: 2.5rem; padding-inline: 0.75rem; }
  .mkt-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem 0.6rem; }
  .mkt-drawer-head h2 { margin: 0; font-size: 2rem; }
  .mkt-drawer-x { min-height: 2.5rem; padding: 0.4rem 0.75rem; }
  .mkt-drawer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
    border-top: var(--rule);
    background: var(--paper-lift);
  }
  .mkt-drawer-foot .btn-ink { margin-left: auto; }
  @keyframes mkt-sheet-in { from { translate: 0 100%; } to { translate: 0 0; } }

  /* ---------------------------------------------------------- grid & cards */
  .mkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 1.8rem 1.4rem;
    margin: 0 0 1.4rem;
  }
  @media (max-width: 520px) {
    .mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 0.8rem; }
  }
  .mkt-card {
    --tilt: 0deg;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.6rem 0.6rem 0.75rem;
    border: var(--rule);
    background: var(--paper-lift);
    box-shadow: var(--drop);
    rotate: var(--tilt);
    transition: rotate 160ms var(--ease-snap), translate 160ms var(--ease-snap), box-shadow 160ms var(--ease-snap);
  }
  .mkt-grid > .mkt-card:nth-child(4n + 1) { --tilt: -0.9deg; }
  .mkt-grid > .mkt-card:nth-child(4n + 2) { --tilt: 0.6deg; }
  .mkt-grid > .mkt-card:nth-child(4n + 3) { --tilt: -0.3deg; }
  .mkt-grid > .mkt-card:nth-child(4n) { --tilt: 1deg; }
  .mkt-card:hover, .mkt-card:focus-within { rotate: 0deg; translate: -3px -3px; box-shadow: var(--drop-lg); z-index: 1; }
  .mkt-card[data-badge="leading"], .mkt-card[data-badge="won"] { border-color: var(--ok); box-shadow: 4px 4px 0 var(--ok); }
  .mkt-card[data-badge="outbid"] { border-color: var(--stamp); box-shadow: 4px 4px 0 var(--stamp); }
  .mkt-card:not([data-status="active"]) .mkt-card-art { filter: grayscale(0.6); }
  .mkt-card[data-status="expired"], .mkt-card[data-status="cancelled"] { border-style: dashed; }

  .mkt-card-link { display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; min-width: 0; }
  .mkt-card-link:hover { background: none; color: inherit; }
  .mkt-card-link:hover .mkt-card-title { text-decoration: underline; text-decoration-thickness: 2px; }
  .mkt-card-art { position: relative; display: block; }
  .mkt-card-title {
    font: 400 1.15rem/1.05 var(--font-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mkt-card-sub {
    font: 500 0.78rem/1.35 var(--font-body);
    opacity: 0.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mkt-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
  .mkt-card-tags .label { font-size: 0.62rem; }
  .mkt-card-tags .tier { font-size: 0.8rem; }
  .mkt-card-meta { font: 600 0.68rem/1.3 var(--font-mono); letter-spacing: 0.06em; opacity: 0.75; overflow-wrap: anywhere; }

  /* State badge, stamped over the sleeve. */
  .mkt-badge {
    position: absolute;
    top: 0.5rem;
    right: -0.4rem;
    z-index: 3;
    padding: 0.3em 0.55em 0.18em;
    border: 2px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font: 400 0.95rem/1 var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    rotate: 6deg;
    box-shadow: 2px 2px 0 var(--ink);
    animation: mkt-badge-slam 300ms var(--ease-snap) both;
  }
  .mkt-badge[data-tone="stamp"] { background: var(--stamp); color: var(--paper); border-color: var(--ink); }
  .mkt-badge[data-tone="ink"] { background: var(--ink); color: var(--paper); box-shadow: 2px 2px 0 var(--stamp); }
  .mkt-badge[data-tone="ok"] { background: var(--ok); color: var(--paper); }
  .mkt-badge[data-tone="paper"] { border-style: dashed; }

  /* Price and countdown. */
  .mkt-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; margin-top: 0.15rem; }
  .mkt-price-now { font: 400 1.7rem/1 var(--font-display); letter-spacing: 0.02em; white-space: nowrap; }
  .mkt-price-meta { font: 600 0.7rem/1.3 var(--font-mono); letter-spacing: 0.05em; opacity: 0.8; }
  .mkt-time {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    padding: 0.3rem 0.5rem 0.25rem;
    border: 1.5px solid var(--ink);
    background: var(--paper);
    font: 600 0.72rem/1.2 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .mkt-time time { font: 600 0.95rem/1 var(--font-mono); letter-spacing: 0.02em; text-transform: none; font-variant-numeric: tabular-nums; }
  .mkt-time[data-urgency="soon"] { background: var(--ink); color: var(--paper); }
  .mkt-time[data-urgency="critical"] { background: var(--stamp); color: var(--paper); border-color: var(--stamp); animation: mkt-pulse 1s steps(2, jump-none) infinite; }
  .mkt-time[data-urgency="over"] { border-style: dashed; }

  /* Notes and the inline bid. */
  .mkt-note { margin: 0.1rem 0 0; font: 500 0.8rem/1.35 var(--font-body); }
  .mkt-note-lead { padding: 0.35rem 0.5rem; border-left: 4px solid var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
  .mkt-note-win { padding: 0.35rem 0.5rem; border-left: 4px solid var(--ok); }

  .mkt-bid { display: grid; gap: 0.4rem; margin-top: auto; padding-top: 0.2rem; }
  .mkt-bid.is-shaking { animation: shake 320ms var(--ease-snap); }
  .mkt-bid-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; }
  .mkt-step {
    min-height: 2.1rem;
    padding: 0.3rem 0.2rem 0.2rem;
    font-size: 0.82rem;
    box-shadow: 2px 2px 0 var(--btn-shadow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mkt-step[aria-pressed="true"] { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-shadow: var(--stamp); }
  .mkt-bid-row { display: flex; gap: 0.4rem; min-width: 0; }
  .mkt-bid-field { position: relative; flex: 1; min-width: 0; margin: 0; }
  .mkt-bid-cur { position: absolute; left: 0.55rem; top: 50%; translate: 0 -50%; font: 600 0.95rem/1 var(--font-mono); pointer-events: none; }
  .mkt-bid-field input[type="number"] { width: 100%; min-width: 0; padding-left: 1.6rem; font-size: 1rem; }
  .mkt-bid-field input[aria-invalid="true"] { border-color: var(--stamp); }
  .mkt-bid-go { flex: none; padding-inline: 0.8rem; }
  .mkt-bid-hint { margin: 0; font: 600 0.68rem/1.35 var(--font-mono); letter-spacing: 0.04em; opacity: 0.8; }
  .mkt-bid-confirm {
    display: grid;
    gap: 0.45rem;
    padding: 0.55rem;
    border: 2px solid var(--ink);
    background: var(--paper);
    rotate: -0.6deg;
    animation: pop-in 220ms var(--ease-snap);
  }
  .mkt-bid-confirm p { margin: 0; font-size: 0.86rem; }
  .mkt-bid-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .mkt-bid-buttons button { min-height: 2.3rem; padding: 0.4rem 0.75rem 0.3rem; font-size: 0.95rem; }
  .mkt-bid-error { margin: 0; }

  /* Feedback: my bid lands, a rival bid moves the price, my lead is lost. */
  .mkt-card[data-flash="bid"] { animation: mkt-bump 420ms var(--ease-pop); }
  .mkt-card[data-flash="price"] .mkt-price-now { animation: mkt-flash 900ms var(--ease-snap); }
  .mkt-card[data-flash="outbid"] { animation: shake 360ms var(--ease-snap); }

  /* ---------------------------------------------------------- empty, more, skeletons */
  .mkt-empty {
    max-width: 38rem;
    padding: 1.1rem 1.2rem;
    border: 2px dashed var(--ink);
    background: var(--paper-lift);
    rotate: -0.5deg;
  }
  .mkt-empty-title { margin: 0 0 0.4rem; font: 400 1.7rem/1 var(--font-display); text-transform: uppercase; color: var(--stamp); }
  .mkt-empty p:last-child { margin: 0; }

  .mkt-more { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
  .mkt-more-count { font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }

  .mkt-skel-bar { height: 7.5rem; margin-bottom: 1.6rem; border: var(--rule); border-left-width: 10px; background: var(--paper-lift); }
  .mkt-card-skel { gap: 0.6rem; }
  .mkt-skel { display: block; background: var(--ink-faint); animation: mkt-skel 1.1s steps(3, jump-none) infinite alternate; }
  .mkt-skel-art { aspect-ratio: 1; }
  .mkt-skel-line { height: 0.95rem; }
  .mkt-skel-line.is-short { width: 60%; }
  .mkt-skel-price { width: 45%; height: 1.6rem; }
  .mkt-skel-btn { height: 2.4rem; }

  @keyframes mkt-badge-slam { 0% { opacity: 0; scale: 1.5; rotate: 18deg; } 60% { opacity: 1; scale: 0.94; } 100% { opacity: 1; scale: 1; rotate: 6deg; } }
  @keyframes mkt-pulse { 50% { background: var(--ink); border-color: var(--ink); } }
  @keyframes mkt-bump { 0% { scale: 1; } 40% { scale: 1.035; } 100% { scale: 1; } }
  @keyframes mkt-flash { 0% { color: var(--stamp); scale: 1.15; } 100% { color: inherit; scale: 1; } }
  @keyframes mkt-skel { from { opacity: 0.45; } to { opacity: 1; } }

  @media (prefers-reduced-motion: reduce) {
    .mkt-badge, .mkt-bid-confirm, .mkt-drawer[open], .mkt-card[data-flash], .mkt-card[data-flash] .mkt-price-now,
    .mkt-bid.is-shaking, .mkt-skel { animation: none; }
    .mkt-time[data-urgency="critical"] { animation: none; outline: 2px solid var(--ink); }
  }
}

/* Rails port: hidden parts stay hidden over the display rules above; the entry of the inline bid lays
 * out in the bid's grid; a reload dims the grid like the prototype's pending transition. */
.mkt [hidden] { display: none; }
.mkt-bid-entry { display: contents; }
html[aria-busy="true"] .mkt-grid { opacity: 0.55; transition: opacity 120ms linear 120ms; pointer-events: none; }