/* market.css - 1StopPawnShop marketplace base (CSS CLASS CONTRACT, lane art-CSS).
   Ticket style: black ground, gold #e2a72c, salt text, radius 0, 120/360/720ms.
   Tokens come from theme.py/theme.v1.json (--night --bone-night --brass-night --mute-night
   --red --display --body --mono --m-dur-* --m-ease-*); every use carries a hex fallback.
   Attributions (ideas re-implemented as plain CSS here; no vendor file is copied or imported):
   - serrated edge: idea after 30secondsofcode "10 CSS background patterns" zigzag, CC-BY-4.0, recoloured gold on black.
   - button spark: idea after 21st.dev shimmer-button, MIT, rewritten as plain CSS with a conic-gradient.
   The rail and the press are plain CSS (scroll-snap, translate); no third source was used, so none is cited. */

:root{
  --mk-gold:var(--brass-night,#e2a72c);
  --mk-ground:var(--night,#000);
  --mk-text:var(--bone-night,#f8f8f6);
  --mk-mute:var(--mute-night,#8c8c89);
  --mk-hair:rgba(226,167,44,.3);      /* the hairline COLOUR (the .mk-hair class is the rule) */
  --mk-ink:var(--night,#000);         /* ink ON gold: the only text colour that belongs on --mk-gold */
  --mk-gap:16px;
}

/* --- .mk-hair : 1px brass hairline, as a rule or as a border --------------- */
.mk-hair{border:0;border-top:1px solid var(--mk-hair);height:0;margin:0}
.mk-hair--box{border:1px solid var(--mk-hair);height:auto}

/* --- .mk-edge : serrated ticket edge top and bottom, 4px ------------------- */
/* zigzag idea after 30secondsofcode "10 CSS background patterns", CC-BY-4.0 */
.mk-edge{position:relative;background:var(--mk-ground)}
.mk-edge::before,.mk-edge::after{
  content:"";position:absolute;left:0;right:0;height:4px;pointer-events:none;
  background:
    linear-gradient(135deg,var(--mk-gold) 25%,transparent 25%) -2px 0/8px 8px,
    linear-gradient(225deg,var(--mk-gold) 25%,transparent 25%) -2px 0/8px 8px;
}
.mk-edge::before{top:0}
.mk-edge::after{bottom:0;rotate:180deg}

/* --- .mk-btn : ticket button with the conic spark -------------------------- */
/* spark idea after 21st.dev shimmer-button, MIT, as plain CSS */
.mk-btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;min-width:44px;padding:10px 20px;border:0;border-radius:0;
  background:var(--mk-ground);color:var(--mk-gold);cursor:pointer;text-decoration:none;
  font-family:var(--display,"Big Shoulders Display","Arial Narrow",Impact,sans-serif);
  font-size:1rem;font-weight:800;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  transition:color var(--m-dur-fast,120ms) var(--m-ease-out,cubic-bezier(.22,.61,.36,1)),
             translate var(--m-dur-fast,120ms) var(--m-ease-out,cubic-bezier(.22,.61,.36,1));
}
.mk-btn::before{
  content:"";position:absolute;left:50%;top:50%;width:400%;aspect-ratio:1;
  translate:-50% -50%;z-index:-2;
  background:conic-gradient(from 0turn,transparent 0 .82turn,var(--mk-gold) .92turn,transparent 1turn);
  animation:mk-spin 2400ms linear infinite;
}
.mk-btn::after{content:"";position:absolute;inset:2px;z-index:-1;background:var(--mk-ground)}
.mk-btn:hover{color:var(--mk-text)}
.mk-btn:active{translate:0 2px}
.mk-btn--ghost{color:var(--mk-text)}
.mk-btn--ghost::before{background:none;border:1px solid var(--mk-hair);inset:0;width:auto;height:auto;
  left:0;top:0;translate:0 0;aspect-ratio:auto;animation:none}
.mk-btn--ghost:hover{color:var(--mk-gold)}
@keyframes mk-spin{to{rotate:1turn}}

/* --- .mk-chip : DM Mono label chip ---------------------------------------- */
.mk-chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:0;
  border:1px solid var(--mk-hair);color:var(--mk-gold);background:transparent;
  font-family:var(--mono,"DM Mono",ui-monospace,Menlo,monospace);
  font-size:.75rem;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.mk-chip--mute{color:var(--mk-mute)}

/* --- .mk-rail : horizontal scroll-snap rail -------------------------------- */
.mk-rail{
  display:flex;gap:var(--mk-gap);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-left:16px;scroll-padding-right:16px;
  padding:16px;margin:0;list-style:none;
  border-top:1px solid var(--mk-hair);border-bottom:1px solid var(--mk-hair);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.mk-rail>*{scroll-snap-align:start;flex:0 0 auto}

/* --- .mk-spot : pointer spotlight, fine pointers only ---------------------- */
@media (pointer:fine){
  .mk-spot{position:relative;isolation:isolate}
  .mk-spot::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(240px circle at var(--x,50%) var(--y,50%),rgba(226,167,44,.16),transparent 60%);
    opacity:0;transition:opacity var(--m-dur-base,360ms) var(--m-ease-out,cubic-bezier(.22,.61,.36,1));
  }
  .mk-spot:hover::before,.mk-spot:focus-within::before{opacity:1}
}

/* --- .mk-card family ------------------------------------------------------- */
.mk-card{
  display:flex;flex-direction:column;border-radius:0;
  border:1px solid var(--mk-hair);background:var(--mk-ground);color:var(--mk-text);
  text-decoration:none;
  transition:translate var(--m-dur-base,360ms) var(--m-ease-out,cubic-bezier(.22,.61,.36,1)),
             border-color var(--m-dur-fast,120ms) linear;
}
.mk-card:hover,.mk-card:focus-within{translate:0 calc(var(--m-lift,10px) * -1);border-color:var(--mk-gold)}
.mk-card__cut{position:relative;aspect-ratio:1;overflow:hidden;background:var(--mk-ground)}
.mk-card__cut img,.mk-card__cut svg{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.mk-card__cut::after{
  content:"";position:absolute;inset:6px;pointer-events:none;border-radius:0;
  border:2px solid var(--mk-gold);box-shadow:0 0 0 4px var(--mk-ground);
}
.mk-card__body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.mk-card__body>h3,.mk-card__body>h2{
  font-family:var(--body,"DM Sans","Helvetica Neue",Arial,sans-serif);
  font-size:1rem;font-weight:500;line-height:1.3;margin:0;color:var(--mk-text);
}
.mk-card__price{
  font-family:var(--mono,"DM Mono",ui-monospace,Menlo,monospace);
  font-size:.875rem;line-height:1.4;color:var(--mk-gold);letter-spacing:.04em;
}
.mk-card__price small{display:block;font-size:.75rem;color:var(--mk-mute);letter-spacing:.08em}
.mk-card__shop{
  font-family:var(--mono,"DM Mono",ui-monospace,Menlo,monospace);
  font-size:.75rem;line-height:1.4;color:var(--mk-mute);text-transform:uppercase;letter-spacing:.1em;
}

/* --- .mk-dlg : native dialog ---------------------------------------------- */
.mk-dlg{
  border:1px solid var(--mk-hair);border-radius:0;padding:0;
  background:var(--mk-ground);color:var(--mk-text);
  width:min(560px,calc(100vw - 32px));max-height:min(86vh,720px);overflow:auto;
}
.mk-dlg::backdrop{background:rgba(0,0,0,.8)}
.mk-dlg[open]{animation:mk-rise var(--m-dur-base,360ms) var(--m-ease-out,cubic-bezier(.22,.61,.36,1)) both}
.mk-dlg[open]::backdrop{animation:mk-fade var(--m-dur-base,360ms) linear both}
@keyframes mk-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes mk-fade{from{opacity:0}to{opacity:1}}

/* --- .mk-drawer : right sheet, bottom sheet on small screens --------------- */
.mk-drawer{
  position:fixed;inset:0 0 0 auto;z-index:60;border-radius:0;
  width:min(420px,100vw);max-width:100vw;height:100dvh;overflow:auto;
  background:var(--mk-ground);color:var(--mk-text);
  border-left:1px solid var(--mk-hair);border-top:0;
  translate:100% 0;visibility:hidden;
  transition:translate var(--m-dur-base,360ms) var(--m-ease-out,cubic-bezier(.22,.61,.36,1)),
             visibility 0s linear var(--m-dur-base,360ms);
}
.mk-drawer[data-open]{translate:0 0;visibility:visible;transition-delay:0s}
@media (max-width:640px){
  .mk-drawer{inset:auto 0 0 0;width:100vw;height:min(86dvh,640px);
    border-left:0;border-top:1px solid var(--mk-hair);translate:0 100%}
  .mk-drawer[data-open]{translate:0 0}
}

/* --- .mk-hold : hold-to-confirm bar fill ----------------------------------- */
.mk-hold{position:relative;overflow:hidden}
.mk-hold::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--mk-gold);
  transform-origin:left center;scale:0 1;
  transition:scale var(--m-dur-slow,720ms) linear;
}
.mk-hold[data-holding]::after{scale:1 1}

/* --- reduced motion: nothing moves, every control still reaches its end ----- */
@media (prefers-reduced-motion:reduce){
  .mk-btn{border:2px solid var(--mk-gold)}
  .mk-btn::before{display:none;animation:none}
  .mk-btn--ghost{border-color:var(--mk-hair)}
  .mk-btn,.mk-card,.mk-spot::before,.mk-drawer{transition:none}
  .mk-btn:active{translate:0 0}
  .mk-card:hover,.mk-card:focus-within{translate:0 0}
  .mk-dlg[open],.mk-dlg[open]::backdrop{animation:none}
  .mk-hold::after{transition:none}
  .mk-hold[data-holding]::after{scale:1 1}
}