/* Shared page and form spacing, loaded after the other stylesheets.
   - Equal side margins: 20px on phones, up to 24px on wider phones, the same on every content page and form.
   - Forms and pages are centred and stop at a readable width on large screens.
   - Related details sit close together: labels next to their inputs, short fields in two columns
     where there is room (one column on narrow screens), long inputs full width.
   Only spacing and layout change here: fields, labels, notices, colours and behaviour stay as they are. */
:root{--gut:clamp(20px,5.6vw,24px)}

/* ---------- page margins ---------- */
.mk-page{padding:8px var(--gut) 24px;box-sizing:border-box;max-width:1100px;margin-inline:auto}
#createView .page-head,#authView .page-head,#adminView .page-head{padding-inline:var(--gut)}
#createForm.pf{padding:4px var(--gut) 16px;max-width:720px}
#authView .profile-form{padding:12px var(--gut);margin-inline:auto;box-sizing:border-box}
#adminView .profile-form{padding:12px var(--gut)}
.mk-page,.mk-page *,dialog.mk-form,dialog.mk-form *{min-width:0}

/* ---------- Marketplace listing page ---------- */
.mk-detail{max-width:720px;margin:0 auto}
.mk-back{margin-left:-6px}
.mk-body{padding:10px 0 0}
.mk-crumb{font-size:12.5px;overflow-wrap:anywhere}
.mk-h{font-size:21px;line-height:1.25;margin:2px 0 4px;overflow-wrap:anywhere}
.mk-pr{margin:0 0 2px}
.mk-where{margin:0 0 10px;overflow-wrap:anywhere}
.mk-detail>.mk-body>.mk-btn.gold{width:100%;min-height:46px}
.mk-dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0}
@media(min-width:600px){.mk-dl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mk-dl div{padding:6px 10px;border-radius:10px}
.mk-dl dt{font-size:11.5px;line-height:1.3}
.mk-dl dd{font-size:14px;line-height:1.3;margin-top:1px;overflow-wrap:anywhere}
.mk-sub{font-size:15.5px;margin:12px 0 2px}
.mk-desc{overflow-wrap:anywhere;font-size:15px;line-height:1.45}
.mk-sellerbox{flex-wrap:wrap;gap:8px 10px;margin:12px 0;padding:8px 10px}
.mk-sellerbox>span:nth-child(2){min-width:0;overflow-wrap:anywhere;line-height:1.25}
.mk-sellerbox .mk-btn{flex:none;margin-left:auto;min-height:42px}
.mk-ava{flex:none}
.mk-safe{margin:0;padding:8px 10px}
.mk-bands.owner{margin:8px 0}
.mk-actions{gap:8px;margin-top:10px}
.mk-actions .mk-btn{flex:1 1 auto;min-height:44px}
.mk-count{margin:4px 0 0}

/* ---------- Marketplace browse and My Listings ---------- */
.mk-page .mk-head{flex-wrap:wrap;margin:4px 0 10px}
.ml-main b{white-space:normal;overflow-wrap:anywhere}

/* ---------- Marketplace posting and editing form ---------- */
.mkf-body{padding:12px var(--gut) 20px}
.mkf-foot{padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));flex-wrap:wrap}
.mkf-foot .mk-btn{min-height:46px}
.mk-catline{padding:4px 6px 4px 10px;margin-bottom:10px}
.mk-warn,.mk-errsum{margin:0 0 10px}
.mk-field{margin:0 0 12px}
.mk-label{font-size:14.5px;gap:6px;line-height:1.3}
.mk-hint{margin:1px 0 5px;font-size:12.5px;line-height:1.35}
/* (beats the site-wide 36 px input rule, so fields stay comfortable to tap) */
dialog.mk-form .mk-field input[type=text],dialog.mk-form .mk-field input[type=date],dialog.mk-form .mk-field select,dialog.mk-form .mk-field textarea{min-height:44px;padding:8px 12px}
.mk-err{font-size:13px;margin-top:3px}
.mk-len{margin-top:1px}
.mk-set{margin:4px 0 0}
.mk-set legend{font-size:14.5px;margin-bottom:6px}
.mk-check{min-height:44px}
.mk-check.small{margin:-6px 0 8px}
.mk-media-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.mk-contact{padding:8px 10px}
/* Short fields side by side; each row's labels, examples and inputs line up. */
.mk-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
.mk-two>.mk-field{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;margin:0;padding-bottom:12px}
.mk-two>.mk-field>.mk-label{align-self:end}
.mk-two>.mk-field>.mk-hint{align-self:start}
.mk-two>.mk-field>.mk-err:empty{display:block;visibility:hidden;height:0;margin:0}
.mk-two>.mk-wide{grid-column:1/-1;display:block;grid-row:auto;padding-bottom:12px}
@media(max-width:359px){.mk-two{grid-template-columns:1fr}}
@media(min-width:641px){dialog.mk-form{height:min(100dvh,880px)}}

/* ---------- dialogs ---------- */
dialog.mk-confirm{padding:16px var(--gut)}
dialog.mk-adjust{padding:16px var(--gut)}

/* ---------- account, sign-in and admin pages: the heading lines up with the form ---------- */
#authView .section-head,#adminView .section-head{padding-inline:var(--gut);margin-inline:auto;box-sizing:border-box}
#authView .section-head{max-width:560px}
#adminView .section-head{max-width:1000px}

/* ---------- wallet and PIN dialogs (My Earnings): the same side margins ---------- */
.mz{width:min(calc(100vw - 2 * var(--gut)),390px);padding:16px 18px 14px}
@media(min-width:651px){.mz{width:min(calc(100vw - 2 * var(--gut)),430px)}}